jQuery select first child three levels deep - javascript

I have the following HTML structure:
<div class="s1>
<div class="s2">
<span class="span1">
<span>text</span>
</span>
</div>
</div>
Currently I am selecting the most nested span with the following selectors:
$(".s1").find(">:first-child").find(">first:child").find(">:first-child")
Is there a more efficient way to select that inner span?
Edit: Div with class s1 is already cached, so I cant use $("selector").

You can access it through span1 class,
$('.span1 span')

There are several options, something like this should work:
.s1 .s2 .span1 span:first-child
I'm not sure how specific you need the selector to be.

Give it a class or Id and then try accessing it
<span id="sp1" class="sp1">text</span>
$('#sp1') or $('.sp1')
// Or
$('.span1 > span')

If you are talking about efficiency the fastest is to define an id for the span:
<span id="spanX">text</span>
$('#spanX')
Because this selector maps directly to the cross-browser getElementById
If you cant touch the html for some reason the fastest way would be:
$('.span1 span:first')

$('div.s1 > div:first-child > span:first-child > span:first-child')
Do you need anything more specific than that?

Related

Hide the closest div with a specific ID using Jquery

I am trying to hide a closest div with specific ID but its not working for me
Here is what I have tried.
HTML
<div style="width:50px; height:20px; background-color:green" id="myblock">other content</div>
<div>
<div style="width:50px; height:100px; background-color:yellow" id="dialog-box">content to hide</div>
<div> <a href="#" onclick="hideclosest(this);">
<span> Hide closest Div </span>
</a>
</div>
Script
function hideclosest(ctrl) {
$(ctrl).closest("#dialog-box").hide();
}
Here is Fiddle
http://jsfiddle.net/c2ewk44o/2/
Id should be unique on a page, therefore:
$("#dialog-box").hide();
will simply work for you. If you dont have unique id, then you have to convert them into classes or give all the elements unique id
Try to traverse properly. #dialog-box is not a closest element to that button. By the way it is an id, so you can select it directly with an id selector. But if you want to select it with some other means use the below code,
function hideclosest(ctrl){
$(ctrl).parent().prev("#dialog-box").hide();
}
DEMO
You meant something like:
function hideclosest(ctrl)
{
$(ctrl).closest("div").prev().hide();
}
or like:
function hideclosest(ctrl)
{
$(ctrl).parent().prev().hide();
}
To hide the closet div use that code
$(ctrl).prev("#dialog-box").hide();
Hope solve your problem.

Select grandchildren inside a parent div using Jquery

Below is the code I am working with, as you can see, there is an id named "parent" and an id named "grandchilden". My goal is to get the content inside of this div "grandchildren". How can I achieve it?
I've tried $(this).closest('.grandchildren'), but didnt work.
<div id="parent">
<a href="#">
<div>
<p id="grandchildren">
This is a content
</p>
</div>
</a>
</div>
If you have a ID on that div you can use $('#grandchildren').html()
If you don't have a ID for it, what is the pattern? div > a > div > p ? In that case you can use this:
$('div#parent > a > div > p').html();
Demo here
Please notice the difference between .text() and .html(), if you just need to get text use .text() instead of .html()
If you have a reference like this you could use find which searches downwards, with the selected element as starting point:
$(this).find('.someClass')
$('#parent').find('#grandchildren').text();

CSS or jQuery Selector for span within span

I am trying to select a span within a span within a div using plain CSS or JQuery selectors. The html is as follows:
<div id="example2_paginate" class="dataTables_paginate paging_full_numbers">
<span id="example2_first" class="first paginate_button paginate_button_disabled">First</span>
<span id="example2_previous" class="previous paginate_button paginate_button_disabled">Previous</span>
<span>
<span class="paginate_active">1</span>
<span class="paginate_button">2</span>
<span class="paginate_button">3</span>
<span class="paginate_button">4</span>
<span class="paginate_button">5</span>
</span>
<span id="example2_next" class="next paginate_button">Next</span>
<span id="example2_last" class="last paginate_button">Last</span>
</div>
I want to select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually.
With my very limited knowledge of CSS and jQuery I've tried a couple of things but I'm sure my syntax is wrong, like $("paging_full_numbers span:eq(1)") .
Could you please give me a hint of how to go about it?
To select them individually, you can simply select them all and then use jQuerys .each(). For example
spanList = $('#example2_paginate').find('.paginate_active, .paginate_button');
will find all classes of 'paginate_active' or 'paginate_button' that, are inside your element of id=example2_paginate. Then you can write:
spanList.each(function(index){
<-- code here for occurence of index index-->
});
Alternatively to select the i^th button without looping through them all:
spanList.eq(i)
See jsFiddle: http://jsfiddle.net/t4KWr/
This CSS is what you want.
div.paging_full_numbers > span > span.paginate_active, div.paging_full_numbers > span > span.paginate_button
A quick way to get, say, the third of the 5 spans would be:
$(".paging_full_numbers > span > span:nth-child(3)")
its seem that there is a problem with
$("paging_full_numbers span:eq(1)")
You should write like
$("#paging_full_numbers span:eq(1)")
Or if you are using class
$(".paging_full_numbers span:eq(1)")
This select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually:
$("div.paging_full_numbers span:[class='paginate_active'],[class='paginate_button']").each(function(){
//do what you want here
});
That select the span's with only class 'paginate_active' or only class 'paginate_button'

Selecting child elements with jQuery

I'm trying to quickly select an element on my page using jQuery. This is the code so far:
$('#row-58708 > div.cell name > div > strong').html('tesing');
This is the markup:
<div id="row-58708" class="row">
<div class="cell name">
<div>
<strong>Skin name</strong>
</div>
</div>
</div>
I know what I've written is far off the mark, but I can't work it out anyhow... could anyone lend a hand? Cheers!
You're actually not far off, you're just not using the multiple class selector correctly:
$('#row-58708 > div.cell.name > div > strong').html('tesing');
In your version, you have div.cell name, which literally means "select all name tags that are within a div of class cell." Of course, there is no name tag, but you see the point.
$('.row').find('strong').html('tesing');
Check working example at http://jsfiddle.net/gZA8E/
I take it you want to change Skin name to testing. If so use this:
$('#row-58708 strong').html('testing')

from parent to child without traversing the full path

My divs are nested like this.
<div id="top">
<div class="child1">
<div class="child-child">
<div class="child-child-child">
</div>
</div>
</div>
<div class="child2">
<div class="child-child">
<div class="child-child-child">
</div>
</div>
</div>
</div>
Right now I'm going from #top to .child-child-child by doing this.
$('#top').children('.child1')
.children('.child-child')
.children('.child-child-child');
Do I have to specify the full path like this? I want to omit the middle divs if there's a syntax that would let me do that. But I probably still need to specify whether I want to go through .child1 or .child2.
You do need to specify which path to take, but you could make it a little shorter:
$('#top > .child1').find('.child-child-child');
This will give you the '.child-child-child' that is a descendant of .child1.
Or you could write it like this, using only selectors:
$('#top > .child1 .child-child-child');
Or this, using only traversal methods:
$('#top').children('child1').find('.child-child-child');
You can just use a descendant selector (a space) to find the child anywhere beneath (as .find() does), like this:
$('#top .child-child-child');
Or, a bit more specific:
$('#top > .child1 .child-child-child');
To simplify this, you can use the selector:
$('#top .child1 .child-child-child');
This selector says "an element with a class of .child-child-child that is inside an element with a class of .child1 that's inside an element with an id of top".

Categories