jquery filtering has + not

Question

Okay I have list items, some have a span, some not.
On my event I want to add the span when they don't have any yet.

has() works fine, but not() adds the span to both??

HTML:

<ul>     <li>         <p>item</p>         <span class="spn">empty span</span>     </li>     <li>         <p>item 2</p>     </li> <ul> <hr> <a class="add-span"href="#">check</a> 

JS:

$("a.add-span").click(function() {     $("li").each(function(index) {         // $(this).has("span").find("span").append(" - appended");         $(this).not("span").append('<span class="spn">new span<\/span>');     })     }) 

Answer 1

You can use a combination of the :not and :has selectors like this

$("a.add-span").click(function() {     $("li:not(:has(span))").each(function(index) {         $(this).append('<span class="spn">new span<\/span>');     }); }); 

Here is a demo http://www.jsfiddle.net/xU6fV/

Answer 2

$("a.add-span").click(function() {     $("li").each(function(index) {        if ($(this).children('span').length === 0){          $(this).append('<span class="spn">new span<\/span>');        }     })     }) 

With children() method, the length property is used to check whether or not a span already exits and if it doesn't, one is added/appended.

More Info:

• http://api.jquery.com/length/
• http://api.jquery.com/children/