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
Related
Am trying to use jQuery.contains(parent,child) to check if an element is a child of another the evaluation of the function returns true, eventhough the 2 elements are not subsequent, please find it on jsfiddle
HTML
<button onclick="clickme()">Click me</button>
JS
function clickme() {
parent = $("#parent")
child = $("#child")
alert(jQuery.contains(parent,child))
}
the parent element has the following attributes
<li id="parent"><a class="dropmenu" selectdropvalue="8" geolocation="IN" href="javascript:void(0);" redirect="https://www.rohm.co.kr/">한국 - 한국어</a></li>
the child element am checking has the below
<span>
<a style="width: 156px; display: block;" href="javascript:void(0);" id="portals-button" class="ui-selectmenu headlang">
<span class="ui-selectmenu-status" id="child">Europe - English</span><span class="ui-selectmenu-icon"></span>
</a>
</span>
is that the correct way to use it ?
From https://api.jquery.com/jQuery.contains/ :
The $.contains() method returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply.
So it will still return true if I'm interpreting your screenshots (avoid that btw!) correctly: <span> is child element of <a>, which is child element of <li>, and you are using contains(element li, element span).
Edit considering your latest edit and jsfiddle:
From https://api.jquery.com/jQuery.contains/ :
Note: The first argument must be a DOM element, not a jQuery object or plain JavaScript object.
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>.
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.
I want to be able to get the href from this type of code:
<tbody>
<tr class="odd">
<td class=" sorting_1">
The Link Text
</td>
</tr>
</tbody>
but I want to be able to click on the link itself, or the td.
Here is my CoffeeScript:
$("#myID tr td").click (event)->
event.preventDefault()
link = $(event.target).find("a").attr("href")
$("#anAjaxPod").load(link)
This works if one clicks on the td, but not if if one clicks on the link.
Edit: Updated question, I used find at first. This is just the last code I played with
Use .find() ; .closest() is to climb up the DOM tree testing self and ancestors. Here anchor tag is the child of td so you need to descend down. So find or a children selector is what you need.
$(this).find("a").attr("href")
Closest get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
$("#myID tr td").click(function(event){
event.preventDefault()
link = $(this).find("a").attr("href");
$("#anAjaxPod").load(link);
});
Fiddle
.closest() looks and self or ancestors where as you want to descendent, to find the descendent use find()
link = $(event.target).find("a").attr("href")
try this:
$(function(){
$("#myID tr td").click(function(){
Link = $(this).find("a").eq(0).attr("href");
$("#anAjaxPod").load(Link);
return false;
})
})
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