I have a few divs within a containing div, eg:
<div id="container">
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
</div>
I want to add a class to the 2nd 'item' div, so I created:
$('#container:eq(1)').find('.item').addClass('newclass');
This isnt working. I have also tried using nth-child() as well, also to no avail.
Can anyone suggest to me a better way of going about this?
May be this is what you want:
$('#container').find('.item').eq(1).addClass('newClass')
Your are missing # for id selector, also need to modify the selector.
Live Demo,
$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');
try this
$('#container').find('.item').eq(1).addClass('newclass');
First, you target the container separately:
$('#container')
Then fetch its children, limiting it to only the 2nd child:
.children(':eq(1)')
The perform the rest of your search and action:
.find('.item')
.addClass('newclass');
Complete code:
$('#container')
.children(':eq(1)')
.find('.item')
.addClass('newclass');
$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');
First find the inner element childs and use eq to find the required item and add class to it
Related
I've created a test page, where inside each blocks the divs are sortable. But how is it possible, to let the user drag the div out of it's parent, and put inside an another sortable div?
JSFiddle: http://jsfiddle.net/zq8bqufs/
Code:
$( ".sortable, body" ).sortable();
You can use the items option to determine which items inside the element should be sortable.
JSFIDDLE
HTML
<div class="sortable">
<div class="items">
<div class="items">asd</div>
<div class="items">eee</div>
<div class="items">fff</div>
</div>
<div class="items">asd</div>
<div class="items">
<div class="items">vvv</div>
<div class="items">abbsd</div>
<div class="items">mmm</div>
</div>
<div class="items">dsa</div>
</div>
Javascript
$('.sortable').sortable({
items: '.items'
});
You need to use connectWith, more about that here.
I updated (and simplified) your fiddle with that functionality here: http://jsfiddle.net/vrx6r264/
I have an accordion in my HTML that is dynamically populated as such -
<div class="accordion">
<div class="accordion-panel">
<div class="accordion-heading>
<a data-target="#collapse" data-toggle="collapse">{{x.header}}</a>
</div>
<div id="collapse" class="accordion-body">
....
</div>
</div>
</div>
The problem is that the data-target remains static. So all the open/close buttons only open one piece of the accordion! The solution would be to enumerate the data-target/ids based on $index, but I don't know how to do that.
Is there a way to enumerate attributes in the way that I described? Or is there another solution I can use?
Just replace data-target value with #collepse-{{$index}} and ID of body with 'collapse-{{$index}}'
Hope this might be helpful to you!!
Say I have
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
$('#controller').html().which returns
<div id="first">1</div>
<div id="second">2</div>
How do I get .html() to return
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
Or is there an alternate function for that?
Wrap it (ie. a clone) inside another parent
$('<div></div>').append($('#controller').clone()).html();
Also, check out a similar question.
You need to use outerHTML
Live Demo
$('#controller')[0].outerHTML
You can add your div's clone to dynamically created div and use html of it.
$('<div>').append($('#controller').clone()).html();
Is it possible to do a
document.getElementBy Class ("post[1] .classname").innerHTML ?
post[1] to be the second DIV with class='post' and I want the child .classname of this.
For example: I want to get the innerHTML of the second post => div class="inside".
<div class="post">Post 1
<div class="inside"></div>
</div>
<div class="post">Post 2
<div class="inside">//this here</div>
</div>
<div class="post">Post 3
<div class="inside"></div>
</div>
But if you don't want to use jQuery, but are OK with only supporting later browsers, you can use document.querySelector. http://jsfiddle.net/mendesjuan/4hEwd/
document.querySelector('.post:nth-child(2) .inside').innerHTML
Here's a list of browsers that support it: http://caniuse.com/queryselector
Try using jQuery:
alert($('.post:nth-child(2) > div').html());
JSFiddle here.
I have about thousand DIV tags structured this way:
<div id="1">
<div class="1"></div>
<div class="2"></div>
...
</div>
<div id="2">
<div class="1"></div>
<div class="2"></div>
...
</div>
If I want to now access a particular node, say 'div#10 div.5' - what is the fastest way to do it using javascript DOM traversal? I already have the index values "10" and "5" - I am just looking for the fastest way to achieve this.
Thanks a lot.
If you've got about 1000 DIVs I assume this is auto generated html?
If so, is there any reason why you can't add an id to the inner DIVs too?
<div id="1">
<div id="1.1" class="1"></div>
<div id="1.2" class="2"></div>
...
</div>
<div id="2">
<div id="2.1" class="1"></div>
<div id="2.2" class="2"></div>
...
</div>
Then you can just use getElementById and not have to worry about ordering or spacing etc.
Since element ids have to be unique on the page then this should always be the fastest way to look up the element.
Without validation and assuming the child nodes are the only nodes and all in sequence;
document.getElementById('10').childNodes[4];
Watch out for whitespace that becomes a node https://developer.mozilla.org/En/Whitespace_in_the_DOM
using jquery:
alert($("#10 > .5").html());