如何选择所有列表项但列表项不具有<ul>或<ol>

时间:2016-02-08 12:44:32

标签: javascript jquery dom

我想选择&#34; .favdelParentFold &#34;的子项中的所有列表项但要确保列表项没有<ul>的嵌套子项。如果列表项有任何嵌套的子项&#34; <ul>&#34;我不想触发它。

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档案:

$(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:

如果我点击一个1,两个2,三个3我可以得到这个值和父值,但是四个4有<ul>的孩子我想避免触发。

预期o / p:

如果点击&#34;一个1&#34;我需要得到一个1和fold2

如果点击&#34;一个2&#34;我需要得到一个2和fold2

如果点击&#34;一个3&#34;我需要得到一个3和fold2

但我们不会触发&#34;四个4&#34;

1 个答案:

答案 0 :(得分:1)

我认为您正在寻找类似的内容。

&#13;
&#13;
$(".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);
});
&#13;
<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>
&#13;
&#13;
&#13;

更新:根据小提琴html,js将是这样的:

$(".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('.favdelParentFold').find('#pfDel').text();
    alert(tr);
    alert(pa);
});