Mgr February 2016

How to select all list items but list items don't have nested child of <ul> or <ol>

I want to select all list items in child of ".favdelParentFold" but make sure list items not have any nested child of <ul>. If list items have any nested child "<ul>" I don't want to trigger it.

HTML

<li class="favdelParentFold">
    <a href=""><span class="caret-right"></span></a>
    <span class="folder"></span><span>fold2</span><span class="trashcan">press me</span>

    <ul>
        <li><a href="">One 1</a><span class="trashcan">press me</span></li>
        <li><a href="">Two 2</a><span class="trashcan">press me</span></li>
        <li><a href="">Three 3</a><span class="trashcan">press me</span></li>
        <li>
            <a href="">Four 4</a><span class="trashcan">press me</span>
            <ul>
                <li>four 1.1</li>
                <li>four 1.2</li>
            </ul>
        </li>
    </ul>
</li>

JS file:

$(document).ready(function () {
    $(".favdelParentFold ~ ul li.trashcan").click(function () {
        var tr = $(this).prev('span').text();
        var pa = $(this).closet().text();
        alert(tr);
        alert(pa);
    });
});

EX:

If I click on one 1, two 2, three 3 I can get the this value and parent value but four 4 have child of <ul> I want to avoid triggers.

Expected o/p:

If click "one 1" i need to get one 1 and fold2

If click "one 2" i need to get one 2 and fold2

If click "one 3" i need to get one 3 and fold2

But we don't trigger "four 4"

Answers


Azim February 2016

I think you are looking for something like following.

$(".favdelParentFold ul li .ecm-trashcan").click(function() {
    var tr = $(this).prev().text();
    var ma = $(this).closest('.favdelSubFold').find('#sfDel').text();
    var pa = $(this).closest('.favdelParentFold').find('#pfDel').text();
    alert(tr);
    if(tr!=ma) alert(ma);
    alert(pa);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="favdelParentFold">
    <a href=""><span class="caret-right"></span></a>
    <span class="folder"></span><span>fold2</span><span class="trashcan">press me</span>

    <ul>
        <li><a href="">One 1</a><span class="trashcan">press me</span></li>
        <li><a href="">Two 2</a><span class="trashcan">press me</span></li>
        <li><a href="">Three 3</a><span class="trashcan">press me</span></li>
        <li>
            <a href="">Four 4</a><span class="trashcan">press me</span>
            <ul>
                <li>four 1.1</li>
                <li>four 1.2</li>
            </ul>
        </li>
    </ul>
</li>

Update: according to fiddle html the js will be like this:

$(".favdelParentFold ul li .ecm-trashcan").click(function () {
    if ($(this).parent().find('ul').length || $(this).closest('.favdelSubFold').length) return;

    var tr = $(this).prev('a').text();
    var pa = $(this).closest('.favdelParen 

Post Status

Asked in February 2016
Viewed 2,522 times
Voted 8
Answered 1 times

Search




Leave an answer