jQuery selector anchor inside div - javascript

I have the following HTML code:
<div id="mycontainer">
<p> title </p>
<ul>
<li><span>**</span>KEY</li>
</ul>
<ul>
...
</ul>
</div>
How would I get the KEY value? In other words, from this div with id = "mycontainer", how would I go to get from the first ul, the content of the element?

$("#mycontainer ul:first a").text();
here, have a fiddle: http://jsfiddle.net/8tvTt/

Something like this will achieve what you're after:
$("#mycontainer ul:first a").text();

This works:
$('#mycontainer ul:eq(0) a').text();
This works too: (more readable)
$('#mycontainer ul:first a').text();

Use this:
$('#mycontainer a').text();

While a lot of the existing answers will achieve what you're after, I think what you're really asking for (or at least what you really need) is some familiarity with jQuery selectors and DOM traversing.
A lot of people seem to be assuming that you want the inner text of the link element, which I am not sure is the case. Without providing for variations on this markup and without concern for speed of selectors, any number of answers will do what you want, including something as silly as $('a').text(); since its the only a in the markup you provided. And we can only guess about the circumstances. It'd be more helpful to understand how each of the answers works (and why the unsuccessful ones don't, for that matter) and why.
Specificity of selectors are desirable, but you have to weigh the costs and benefits of what can actually be costly trips through the DOM. Will you always be getting the text content of a link? Could it possibly ever contain html? Do you actually want to get the wrapping <a> as well?
If you just want the text content of the only a inside #mycontainer, sure:
$("#mycontainer ul:first a").text();
But $('#mycontainer').find('a').text(); might be faster. (Wait, what's find()?, you ask, and why is it faster?) But what if KEY is formatted <strong>ly, and you want that to carry over to whatever you're doing with it? You might want to use .html() instead. If you want the a itself, why not:
$("#mycontainer ul:first a");
But what if each li has an a?
$("#mycontainer ul:first li:first a").clone();
Do you want the span, too?
$("#mycontainer ul:first li:first").clone();
or
$("#mycontainer ul:first li:first").html();
Do you want the wrapping <li> as well?
$("#mycontainer ul:first li:first").clone();
Play around, read some more, and then you wont get everyone (myself included) so ravenous for a few silly, easy rep.

You need read jquery selectors... but use this
$('#mycontainer ul:first a').text();

Related

Jquery traversing and using selectors

I'm reading a book and they show a couple of examples of how to select elements on the DOM, but they advise to always use Jquery trasversing methods over the selectors, for example if you have a list inside a div instead of using
$("#myList > li")
You should use
$("#myList").children("li")
Most of the time I use the first over the latter, the author says the 2nd is prefered and more efficient but he does not address why, can anyone explain the reason behind this?
I think the difference in performance in that particular case comes down to this:
document.querySelectorAll('#myList > li');
// VS
document.getElementById('myList').children;
And the performance test here: http://jsperf.com/ae-d2-56-2a-e2-36-a3-d3-52-74
jQuery might check to see if it's a li given the selector but that's still going to be faster than querySelectorAll or Sizzle.

When removing a class with jQuery, is it better to include the class in the selector?

Probably this will not result in any noticable performance difference, but I was just interested. If I am removing a class on a list of elements using jQuery, is it better practice or performance to include the class in the selector?
So either include it:
$('#myList li.classToRemove').removeClass('classToRemove');
or don't include it:
$('#myList li').removeClass('classToRemove');
So basically is there any difference to narrowing the list in the selector and in the removeClass method.
Selectors are matched backwards (last to first), meaning it will first find "all elements with "classToRemove" which are also "li" which are also children of "#mylist" ".
It's done that way to narrow down the list as much as possible, as soon as possible.
Therefore, you should go with
$('#myList li.classToRemove').removeClass('classToRemove');
Less items to match means a faster, more efficient script.
Assuming that not all the <li> elements have that class, then I'd say that it's better to run .removeClass() on the filtered set.
But overall, there will be other things that will have an impact on the performance, like...
The number of elements matched by '#myList li' vs '#myList li.classToRemove'
The way different environments optimize their DOM selection
The actual performance difference of the innards of the .removeClass() method between different environments
So unless you're talking about unnecessarily running .removeClass() on a large subset of elements, I wouldn't worry about it too much.
Using the more specific selector will improve performance but it won't affect the result of .removeClass().
Think of each addition to a selector like a drill down. Given the html below:
<div id="myList">
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3" class="classToRemove"></li>
</ul>
</div>
//In order of fastest to slowest:
//Selecting the exact li and calling removeClass once
$('#li3').removeClass('classToRemove');
//In this one we are skipping 2 li's and then calling removeClass once
$('#myList li.classToRemove').removeClass('classToRemove');
//In this one we have to call removeClass 3 times
$('#myList li').removeClass('classToRemove');
Sorry to bump an old post.
The test at this page seems to suggest that NOT including the class selector is around 10-15% quicker. So, if you want to use jQuery, the best approach is just:
$('#myList li').removeClass('classToRemove');
Note - this page does appear to use jQuery 1...

How to find the direct child using this selector?

I have this little code:
$("ul#mainnav > li").hover(function(){
$("ul#mainnav > li > a").slideUp();
})
I just don't know the right syntax for selecting the direct child <a> using $(this)
What I used is this, and I think its wrong...
$(this).find("> a")
Thank you.
For starters, you have an extra quote. Remove the quote after this. Like this:
$(this).find("> a")
Admittedly I've never used selectors for this case, so I can't comment about why it's not working. Instead, I'd recommend using children() which is usually faster and, IMHO, clearer.
$(this).children('a');
But if you really want to use a string selector, this should work:
$('> a', this)
Note that the jquery docs say that the latter code will be deprecated at some point, so use with caution. I'd still recommend using children().
You can use $(this).children("a:first") if you just want the first a tag as well

Performance in jQuery with selectors

i was wondering things...
If i need to get the content or append an click function to an div, as the structure of the selectors it's something like that:
$('body #content #sidebar .modalwindow #global-content')
i want to target #global-content, the final id of the selectors.
what its better?
Just target it as $('#global-content') and do what i wanna or give to it all the path?
$('#global-content') is the best selector to use, altough maybe the whole selector will be executed the same way (if jQuery starts from right to left, which I'm not sure it does). ID should be unique and getElementById() is the fastest native browser method, so $('#global-content') is the fastest possible selector.
Keep in mind also, that when you are searching for something exactly 1 level lower in the DOM tree, you can put > in the selector. Example:
$('body .content') is equialent to $('body').find('.content')
$('body > .content') is equialent to $('body').children('.content')
The second one is faster.
You can experiment and try out your selectors here
a similar question was asked in
jQuery Selectors, efficiency
the answer is that
$('#global-content')
is faster
if you know the id of your element and if your id is really unique (as it should be). It is faster to call directly the id >> $('#global-content').
Thus, it is interpreted by jquery to one of the fastest selector getElementById() instead of filtering the DOM.
Note: I know jquery 1.5 and higher (maybe even since 1.4) were optimized to select by id even if the jquery code was adding too much information but that's not the best way to rely on the framework to correct a bad coding

How to remove only tag using jQuery?

I want to remove the span using jQuery,
I have tried the .unwrap(); but it's not working.
<div>
<ul>
<li><span>link</span></li>
<li><span>link</span></li>
</ul>
</div>
Obviously, unwrap doesn't work as the spans only have text nodes inside them and jquery doesn't handle text nodes too well... this works however (you could use also jQuery.text instead of jQuery.html if you're sure that the span only contains text):
$('li a span').replaceWith($('li a span').html());
Working example
Edit: Actually, it seems that unwrap works as well if you use jQuery.contents to work around the jquery's inability to directly select text nodes:
$('li a span').contents().unwrap();
$('li').find('span').remove();
or
$('li').find('span').detach();
If you want to remove the wrapping only, try
var buffer = $('li').find('span').text();
$('li').find('span').parent().html(buffer);
Unwrap should work. It's possible you're not successfully selecting the span which you wish to unwrap. You can try the following code which should select that span successfully:
$("li a span").unwrap()
It's a bit unclear from your question what exactly you're trying to do. It's also unclear whether you're having trouble with the selectors or with the jquery api. To get a better handle on jquery's selectors I recommend you install firebug and firequery, as it can really help you understand what you're selecting.
$("span").each(function() {
var content = $(this).text();
$(this).remove();
$("a").html(content);
});
.remove()
http://api.jquery.com/remove/
:)

Categories

Resources