父級的jQuery選擇器特定元素

Question

我正在構建一個菜單，看起來像這樣：

<ul id="myUl">
    <li><span>li #1</span>
        <ul>
            <li>
                <div class="myContent">
                    <a href="" name="myLink">clickMe!</a>
                </div>
            </li>
    </li>
</ul>

因此，我想為id為"myUl".的ul的<a>標記定義一個單擊處理程序"myUl".

我嘗試了類似CSS選擇器的方法：

$('ul[id="myUl] a').on('click', do stuff!);

要么

$('ul[id="myUl] > a').on('click', do stuff!); //這不起作用，因為a不是ul的直接子代。

處理此特定ul的a元素的點擊的正確方法是什么？

Answer 1

像這樣。

$('#myUl a').on('click', your_func);

請注意，我沒有使用> ，后者將您限制為ul直接后代（子代） 。

或者您可以這樣做。

$('#myUl').on('click', 'a', your_func);

不同之處在於，這會將處理程序綁定到UL，但僅在單擊a時觸發它。 第一個示例直接綁定到a 。

Answer 2

很簡單：

$('#myUl').on('click', 'a', do stuff!);

Answer 3

在選擇器中使用>使其比需要的更加具體。 如果將其取出，則它將適用於任何子元素（在任何級別），而不是直接子元素。

$(document).ready(function() {
    $('ul#myUl a').click(function() {
        // do stuff
    });
});

Answer 4

$('ul#myUl a').on('click', do stuff!);

要么

$('ul[id="myUl"] a').on('click', do stuff!);

應該管用。

Answer 5

您在$('ul[id="myUl"] a').on('click', do stuff!);和$('ul[id="myUl"] > a').on('click', do stuff!);但是您可以直接使用element的id作為選擇器：

$('#myUl a').on('click', handler function);

Answer 6

您缺少引號，請嘗試以下操作：

$('#myUl a').on('click', function(){alert('do stuff!')});

Answer 7

您還可以在選擇器中指定上下文

$('a','#myUl').click
//  This is equivelant to $('#myUl').find('a')
//  So this finds all descendant anchor tags of #myUl