Using jQuery, I've got a selector -- call it $('#someDiv1') -- that I'd like to get the inner HTML for, but also the header of the tag as well. So given this HTML structure..
<div id="parentDiv">
<div id="someDiv1">
<div id="innerDiv1_1"></div>
<div id="innerDiv1_2"></div>
</div>
<div id="someDiv2">
<div id="innerDiv2_1"></div>
<div id="innerDiv2_2"></div>
</div>
</div>
If I've got the selector $('#someDiv1') in a variable -- call it $someDiv1 -- I'd like to be able to use that variable to get a string that is:
"<div id='someDiv1'>
<div id='innerDiv1_1'></div>
<div id='innerDiv1_2'></div>
</div>"
I thought about just saying $someDiv1.parent().html(), but that would give me the div's sibling(s) as well (someDiv2, etc..). Any ideas? Thanks.
You also try
$('#parentDiv').clone().find("> :not(#someDiv1)").remove().end().html();
You can try something like this:
$('<div></div>').append($('#someDiv1').clone()).html()
Related
Let's say I have a ditamap file.I have published into html5.after published let's say my html file look like
<body id="SampleTopic">
<h1 class="title topictitle1" id="ariaid-title1">Sample topic</h1>
<div class="body">
<p class="p">some<strong class="ph b">bold</strong><span class="ph special">text</span></p>
<div class="p">
<dl class="dl">
<dt class="dt dlterm">Term</dt>
<dd class="dd">Defination</dd>
</dl>
</div>
</div>
</article>
</body>
here in Html file, I want to add some new attribute on the body element like
<body id="SampleTopic" class="test">
so can anyone help me with how to solve this????
can I add some plugin, if yes how to write the code???
If all you need is the HTML #class attribute, then there's no need to develop a custom plug-in.
You can just specify a value for the #outputclass attribute on an element in your DITA source files, and the value will be passed to the HTML #class attribute in the output.
i have a handlebar-template in B.phtml file like this:
<div class="conversation-header" id="conversation-header" >
<div class="avatar">
<a href="{{profileUrl}}">
{{> avatar showHardcore=false}}
</a>
</div>
</div>
This template is going to append A.html file which have been add eventlistener 'load' then will do something.
But it can't check exactly when the handlebars-template completely rendered.
May i have a callback for B.phtml or sth like that and can i write this on A.phtml ?
I need to execute snippets like:
<div class="lift:firstSnippet.content?eager_eval=true">
<p>Some text</p>
<div class='lift:secondSnippet.showAddNewForm>'></div>
</div>
So in my template I have
<div class="lift:firstSnippet.content?eager_eval=true"></div>
FirstSnippet insert some html from db:
def content = "*" #> Unparsed(page.open_!.content.is)
That html looks like:
<p>Some text</p><div class='lift:secondSnippet.showAddNewForm>'></div>
But SecondSnippet doesnt execute. I also tried to use S.eagerEval(Unparsed(page.open_!.content.is))
but result is same. I can't figure out why.
I don't know if you copied your template code over or re-typed it, but there's a syntax error:
<div class="lift:firstSnippet.content?eager_eval=true">
<p>Some text</p>
<div class='lift:secondSnippet.showAddNewForm>'></div>
</div>
Note the > at the end of secondSnippet.showAddNewForm>
I think it should read:
<div class="lift:firstSnippet.content?eager_eval=true">
<p>Some text</p>
<div class='lift:secondSnippet.showAddNewForm'></div>
</div>
Please try that and see if it makes a difference.
I've my markups as
<div id="home" class="current">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller">
<ul id="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<!-- Events Details -->
<div id="events">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller"> <!-- stuffsss --></div>
</div>
<div class="footer">Footer</div>
</div>
For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.
//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.
I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.
Can anyone help me change the codes so that it works by implementing classes instead of the the id??
Rob is right, but you can change your code to scroller classes as you said.
Then initialise your scrollers within unique wrappers like this:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.
I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread
https://stackoverflow.com/a/7584694/1232232
but for this to work you need to assign ID's to your classed (div containers)
like
<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.
I have this html:
<div id="top">
<div id="potato"></div>
</div>
<div id="bottom">
<div id="potato"></div>
</div>
I am trying to use JQuery to access the bottom potato div, and none of the following work.
$('#top #potato').html('Russet');
$('#bottom #potato').html('Red');
$('#top > #potato').html('Russet');
$('#bottom > #potato').html('Red');
$('#potato').html('Idaho');
All of these just modify the top div and not the bottom one. How do I modify the bottom div?
All elements must have unique IDs, in this case you may use the class attribute, so that you have
<div class="potato" />
Which you may access like this:
$('#bottom > .potato').html('Idaho');
I just ran into this problem. Although it's true you shouldn't have two items with the same ID, it happens.
To get the div you want, this is what works for me:
$('#bottom').find('#potato');
For one thing you can not have an element that has the same id as another. Id is unique, but class names can be used as many times as you want
<div id="top">
<div id="potato1"></div>
</div>
<div id="bottom">
<div id="potato2"></div>
</div>
jquery as so:
$(function{
$("#potato2").html('Idaho'); //if you're going to name it with an id,
// that's all the selector you need
});
What you posted and said doesn't work seems to work to me.
$('#top #potato').addClass('Russet');
$('#bottom #potato').addClass('Red');
https://jsfiddle.net/wzezr706/
no need to put classes on everything, but you should have unique id's for everything. That aside, try this:
$("#bottom + div").html('Idaho');
Try this:
$("#bottom #potato").html('Idaho');
Or
$("#bottom #potato:last").html('Idaho');
your HTML is not valid, since you have non-unique ids