Find Next Sibling Element In DOM With JavaScript - javascript

How can I find the next element in the current scope? For example, I want to find div element and after this the next one which is p?
If I use document.getElementsByTagName('DIV')[0].nextSibling it returns #text. I want it to return p tag.
<div>
<table>
<tr>
<td></td>
</tr>
</table>
</div>
<p></p>

You can use nextElementSibling. If you need to support older browsers, traverse nextSibling until you find an Element node.

You want .nextElementSibling.
document.getElementsByTagName('DIV')[0].nextElementSibling
The reason you are getting #text is because nextSibling will return the next node in the childNodes list of the parent element. In this case it is whitespace (hence #text) because of the newline used between </div> and <p>.

Related

Using querySelector() to obtain last td element

I have a variable which is a node from the dom. I've managed to get all the way down to close to where I want to be:
myvar.querySelector('.tblItinPriceSummary tr')
Gives me this:
<tr>
<td>Subtotal</td>
<td align="right">$189.00</td>
</tr>
What I want is the textContent of the second td $189.
Is there anything I can add inside of querySelector so that I can append it with .textContent to get this piece of data?
You could either use :last-child or :last-of-type to access the last td element within the parent.
document.querySelector('.tblItinPriceSummary tr td:last-child').textContent;

jQuery select child of closest element

Basically I want to be able to select the div level2 parent from the child level4 div. My application does not has such classes, otherwise I'd just select level2 :)
<div class="level1">
<div class="level2">
<div class="level3">
<div class="level4"></div>
</div>
</div>
<div class="level2"> <!-- this is hidden -->
<div class="level3">
<div id="start" class="level4"></div>
</div>
</div>
</div>
I start with $('#start') and search for the first parent which is visible, but I'm not seeing a way to return the child of that parent. Searching for $('#start') inside the parent seems very wasteful as I start with a sub child to begin with.
$('#start').closest(':visible') // returns level1
$('#start').closest(':visible').first() // returns the first level2. I can't just use second because the number of level2s can change.
$('#start').closest(':visible').children().each(function(){ /* do some search to check it contains `$('#start')` }) // seems very wasteful.
Another way to look at what I'm trying to say would be; start in the middle, find the outside (the visible element), and move one element in.
How about this:-
$('#start').parentsUntil(':visible').last();
This will give you all hidden parent div's until its visible parent and last() wil give the outermost parent which is hidden. last is not a selector on position it is the last() in the collection.
You want the .has() method
Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
$('#start').closest(':visible').children().has('#start');
See fiddle for example.
You say that the classes don't exist...why not add them? It would make thinks much easier to find. The class names don't need to have actual styles associated.
var allLevel4 = $('#start').closest(':visible').find('.level4');
var firstLevel4 = $('#start').closest(':visible').find('.level4')[0];
var secondLevel4 = $('#start').closest(':visible').find('.level4')[1]; //also, #start
Use .filter():
$('#start').closest(':visible').children().filter(':first-child')
.find() is also good for selecting pretty much anything.

jquery select nested div

How do I select div that contains "my content"?
<table>
<tr>
<td class="ms-disc-bordered-noleft">
<div class="">
<div>some content</div>
<div>my content</div>
</div>
</td>
</tr>
</table>
what relation does that div has with td.ms-disc-bordered-noleft?
$('.ms-disc-bordered-noleft div:last')
$('.ms-disc-bordered-noleft
div:eq(2)')
$('.ms-disc-bordered-noleft').find('div:eq(2)');
or
$("div:contains('my content'):last");
return the droid...I mean div...you are looking for.
I have a feeling that $('.ms-disc-bordered-noleft div:last') is your best option; my performance test shows that it is generally the fastest of the 4 proposals (FireFox prefers $('.ms-disc-bordered-noleft').find('div:eq(2)');).
See http://jsfiddle.net/jhfrench/cfeZU for examples of the different selectors in use.
As for the second part of your question, that div is a 'descendant' of the td.ms-disc-bordered-noleft element. More specifically, it is the child of the td's child.
One option as second child of inner <div>:
var div = $(".ms-disc-bordered-noleft > div > div:eq(1)");
It's a parent node, you can traverse up an down using .parent() and .children() or .find()
How do I select div that contains "my content"?
$('.ms-disc-bordered-noleft').find('div').contains("my content");
IF I did not understand well your Q. ...you can use:
$('.ms-disc-bordered-noleft div').find('div:last');
^^-parent ^^-first children ^^-last div
Most direct route would be:
var div = $("div:contains('my content'):last");
As far as the relationship to the td goes, you could start with the above and work your way back.
var cell = div.closest('td');
These aren't necessarily the fastest options in terms of performance, but they are the shortest code. And I like short code.
.ms-disc-bordered-noleft div div:nth-child(2)
or
.ms-disc-bordered-noleft div div:last-child

jQuery.closest() gives "null" value

I am doing with this plugin :
<table>
<tr>
<td>
<a class="linkType1" href="google.com">
Google
</a>
<span style="display: none;">Goooooooooooogle</span>
</td>
</tr>
<tr>
<td>
<a class="linkType1" href="yahoo.com">
Yahoo
</a>
<span style="display: none;">Yaaaaaaaaaaaaaaho</span>
</td>
</tr>
</table>
How can I select the closest span of linkType1-anchors for displaying as tooltip ?
Currently I am doing :
jQuery(document).ready( function() {
jQuery("a.linkType1").tooltip({
bodyHandler: function() {
alert(jQuery(this).closest("span").html()); // this alert is showing `null`
return "hi"; // i need to setup the alerted content here
},
showURL: false
});
});
Your span elements aren't ancestors of the links, so closest (which looks for a match for the selector on the current element or its ancestors) isn't what you're looking for.
Based on your markup, you might want next("span") (which will find the next sibling, but only if it's a span; it doesn't continue with subsequent siblings) or possibly nextAll("span").first() (which will find the first next sibling that's a span, in case you ever put something between the a and the span), which finds all subsequent siblings with nextAll and then grabs the first of them (the one nearest the link) via first. So
// If the `span` will always be the very next sibling
alert(jQuery(this).next("span").html());
or
// If you may put something between the `a` and the `span` at some point
alert(jQuery(this).nextAll("span").first().html());
closest() finds the closest parent element. You are looking for a sibling:
jQuery(this).next("span").html()
$(this) is referring to bodyHandler function.
Try this
alert(jQuery(linkType1).closest("span").html());
Why not use find() instead? As closest() transverses up the DOM tree

Is there a jQuery selector/method to find a specific parent element n levels up?

Consider the following HTML. If I have a JSON reference to the <button> element, how can I get a reference to the outer <tr> element in both cases
<table id="my-table">
<tr>
<td>
<button>Foo</button>
</td>
<td>
<div>
<button>Bar</button>
</div>
</td>
</tr>
</table>
<script type="text/js">
$('#table button').click(function(){
//$(this).parent().parent() will work for the first row
//$(this).parent().parent().parent() will work for the second row
//is there a selector or some magic json one liner that will climb
//the DOM tree until it hits a TR, or do I have to code this myself
//each time?
//$(this).????
});
</script>
I know I could special case each condition, but I'm more interested "however deep you happen to be, climb the tree until you find element X" style solution. Something like this, but more jQuery like/less-verbose
var climb = function(node, str_rule){
if($(node).is(str_rule)){
return node;
}
else if($(node).is('body')){
return false;
}
else{
return climb(node.parentNode, str_rule);
}
};
I know about the parent(expr) method, but from what I've seen is allows you filter parents one level up and NOT climb the tree until you find expr (I'd love code example proving me wrong)
The parents function does what you want:
$(this).parents("tr:first");
Also, if you are using jQuery 1.3+ you can use the closest method
$(this).closest("tr");
not jQuery but this options works much better
node.contains( otherNode )
The Node.contains() method returns a Boolean value indicating whether
a node is a descendant of a given node or not
https://developer.mozilla.org/en/docs/Web/API/Node/contains

Categories