2つのjquery選択を入れ子にするより良い方法はありますか？

Question

状況 - 新しいアイテムがあり、フォームを使用してスパンアイテムが追加されています。これらのアイテムには他のすべてのアイテムがあります。

これを行うより良い方法はありますか？複数の宣言子を指定すると、重複しているように見えます。

これは私の初めてのjQueryですが、この冗長性を回避する方法は実際には分かりません。

ありがとうございます。

Answer 1

要素にクラス名を付け、クラスを選択して同じロジックを使用します。

<li class="class-name">Text<span class="class-name"></span></li> 

$('ul').on('click', '.class-name', function(e) { 
e.stopPropagation(); 

if(e.target.nodeName == 'SPAN') { 
    // Code for span 
} else if(e.target.nodeName == 'LI') { 
    // Code for li 
} 
}) 

Answer 2

コンプリート例：

$('ul').click(function (e) { 
 
    switch (e.target.nodeName) { 
 
    case 'LI': 
 
     $(e.target).addClass('completed') 
 
     break 
 
    case 'SPAN': 
 
     $(e.target).parent().slideUp(500, function() { 
 
     $(e.target).parent().remove() 
 
     }) 
 
    } 
 
})

ul { 
 
    width: 200px; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
} 
 
li { 
 
    padding: 3px 0; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
span { 
 
    font-family: Arial, sans-serif; 
 
    font-weight: bold; 
 
    color: #f00; 
 
} 
 
.completed { 
 
    color: #0f0; 
 
}

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>Todo 1 <span>x</span></li> 
 
    <li>Todo 2 <span>x</span></li> 
 
    <li>Todo 3 <span>x</span></li> 
 
    <li>Todo 4 <span>x</span></li> 
 
    <li>Todo 5 <span>x</span></li> 
 
</ul>

PS：他の人とは違って、このソリューションは関係なく、項目のカウント、リスト全体のためのちょうど1イベントリスナーを登録します。 event.targetに基づい

Answer 3

あなたはちょうどそれらをチェーンことができ、jQueryのはとにかくULにそれらのイベントリスナーを追加し、フィルタが自動的に

$("ul").on("click", "li", function() { 

    $(this).toggleClass("completed"); 

}).on('click', "li span", function (event) { 

    event.stopPropagation(); 

    $(this).parent().fadeOut(500, function() { 
     $(this).remove(); 
    }); 

});