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.