Looking for a solution on how to detect if a li has a child ul or ol i discovered jquerys has() which is pretty awesome apart from I need to detect if only the actual clicked li has a child ol, not any of its siblings. Are there any ways of doing this? The documentation doesnt cover this.

HTML

    <ol>
    <li><a class="delete-li" href="">Page 1</a></li>
    <li><a class="delete-li" href="">Page 2</a></li>
    <li><a class="delete-li" href="">Page 3 has ol</a>
             <ol>
                <li><a class="delete-li" href="">Page 4</a></li>
                <li><a class="delete-li" href="">Page 5</a></li>
                <li><a class="delete-li" href="">Page 6</a></li>
             </ol> 
        </li>
 </ol>

JS

$('.delete-li').live('click', function(event){
event.preventDefault();
item_id = $(this).attr('rel');  
clicked = $(this);
////////////////////
    //check if has sub pages
            if(clicked.has('ol')){
              answer = confirm('This will delete all sub pages and content are you sure?');
              console.log(answer);
              if(answer===true){gogogo=true;   
                  }else{gogogo=false;}
                       }else{ gogogo=true;}
        //if yes run AJAX delete
        if(gogogo===true){
        alert('LI REMOVED');
}
////////////////

    });

Checkout the jsfiddle for the code.

Looking for a solution on how to detect if a li has a child ul or ol i discovered jquerys has() which is pretty awesome apart from I need to detect if only the actual clicked li has a child ol, not any of its siblings. Are there any ways of doing this? The documentation doesnt cover this.

HTML

    <ol>
    <li><a class="delete-li" href="">Page 1</a></li>
    <li><a class="delete-li" href="">Page 2</a></li>
    <li><a class="delete-li" href="">Page 3 has ol</a>
             <ol>
                <li><a class="delete-li" href="">Page 4</a></li>
                <li><a class="delete-li" href="">Page 5</a></li>
                <li><a class="delete-li" href="">Page 6</a></li>
             </ol> 
        </li>
 </ol>

JS

$('.delete-li').live('click', function(event){
event.preventDefault();
item_id = $(this).attr('rel');  
clicked = $(this);
////////////////////
    //check if has sub pages
            if(clicked.has('ol')){
              answer = confirm('This will delete all sub pages and content are you sure?');
              console.log(answer);
              if(answer===true){gogogo=true;   
                  }else{gogogo=false;}
                       }else{ gogogo=true;}
        //if yes run AJAX delete
        if(gogogo===true){
        alert('LI REMOVED');
}
////////////////

    });

Checkout the jsfiddle for the code.

• javascript
• jquery

3 Answers 3

has returns a jQuery object which is always true, as your handler is bound to a elements you can use next method and length property:

if ( clicked.next('ol').length ) 

Note that live method is deprecated, you can use on method instead.

$(document).on('click', '.delete-li',  function (event) {
    event.preventDefault();
    var gogogo = false, $clicked = $(this), item_id = this.rel;  
    ////////////////////
    //check if has sub pages
    if ($clicked.next('ol').length) {
        gogogo = confirm('This will delete all sub pages and content are you sure?');
        // console.log(gogogo);
    }

    if (gogogo === true) {
        alert('LI REMOVED');
    }
});

http://jsfiddle/jMF42/

You are binding the click handler to the a element. You need to be in reference to the li.

listItem = $(this).parent('li');
//check if has sub pages
if (listItem.find('ol').length) {
   ...
}

jsfiddle

You are calling function on <a> tag, which doesnt have child. If you want to get deeper you need to refer from his parent <li>.

$('.delete-li').on('click', function (event) {
    event.preventDefault();
    $this = $(this);
    if ($this.parent('li').children('ol').length) {
        answer = confirm('This will delete all sub pages and content are you sure?');
        alert(answer);
    } else {
        alert('dont');
    }
});

http://jsfiddle/NGmz6/