Select element(s) without specific element
Hi this is my problem:
<ul>
<li><span class="show">*</span>Show</li>
<li><span class="show">*</span>Show</li>
<li><span class="show">*</span>Show</li>
<li><span class="show">*</span>Show</li开发者_C百科>
<li>Hide</li>
<li>Hide</li>
</ul>
So oposite of this http://jsfiddle.net/ajitam/GqCpW/
How can I select (with jQuery) 'li's without span.show inside.
thank you
Selector should look like this:
$('ul li:not(:has(span.show))')
Example: http://jsfiddle.net/Mkj7Z/
Since such a selector is pretty expensive, make sure you cache the resulting DOM nodes in a variable for further access.
Try hiding all, then showing those which have span.show
$('ul li').hide().find('span.show').parent().show();
jAndy's solution, $('ul li:not(:has(span.show))')
works well but :not
and :has
are generally poor performing selectors (and he points out that they are expensive). Looking at your markup, is it possible to select the <li>
elements based on their text?
// Using `:contains` we can look for *Hide*
$('ul > li:contains("Hide")')
// Or using `filter()` for an exact match
$('ul > li').filter(function () {
return $.text(this) === "Hide";
});
This is a little faster and a little neater.
Use:
$('ul li').filter(function(){
return $('.show',this).length==0;
});
You can extend the filter to more complex queries.
精彩评论