Question

我尝试将onclick个事件添加到特定li的标记内，该标记位于ul下，标识为#nav。

HTML结构：

<ul id="nav">
    <li><a href="#">link1</a></li>
    <li>
        <a href="#">link2</a>
        <ul>
            <li><a href="#">innerlink1</a></li>
            <li><a href="#">innerlink2</a></li>
        </ul>
    </li>
    <li><a href="#">link3</a></li>
    <li>
        <a href="#">link4</a>
        <ul>
            <li><a href="#">innerlink1</a></li>
            <li><a href="#">innerlink2</a></li>
        </ul>
    </li>
</ul>

Jquery的

$( document ).ready(function() {
    $("ul#nav li").eq(1).children().first().click(function(){
        $(this).attr('onclick', 'return false;');
        return false;
    });
    $("ul#nav li").eq(5).children().first().click(function(){
        $(this).attr('onclick', 'return false;');
        return false;
    });
});

如果你看到，我正在编写jQuery两次以选择li项的一个元素，其中包含另一个ul并添加onclick事件。这工作正常。但有没有办法减少我的代码并使其更干净？

Answer 1

因此，您不希望包含 ul 子项的 li 触发Click事件，因此我认为它会像这样

$('#nav li:has(>ul)').click(function (event) {
    event.preventDefault();
    alert('click');
});

小提琴可以在这里找到：http://jsfiddle.net/552T4/3/

Answer 2

嘿，你可能正在寻找这个：

    $("ul#nav li:has(>ul)")

Answer 3

$("ul#nav li:eq(1),ul#nav li:eq(5)").children().click(function(){
   e.preventDefault();
   var youClicked=$(this).text();
   alert(youClicked);

});

Answer 4

请试一试。

$( document ).ready(function() {
    $("#nav > li").each(function(){
        $(this).find('a').attr('onclick', 'return false;');
    });    
});

下面是这个小提琴。

Js Fiddle

在上面我申请＆＃34; onclick＆＃34;事件到所有锚点。如果你只想申请那个有孩子ul的li那么代码是这样的。

$( document ).ready(function() {
    $("#nav > li").each(function(){
        if($(this).find('ul').length>0)
        {
           $(this).find('a').attr('onclick', 'return false;');
        }
    });    
});

下面是选择了Ul元素的Li的链接。

li with ul onclick

Answer 5

是的，将ID添加到您需要的元素中：

HTML结构：

<ul id="nav">
    <li><a href="#">link1</a></li>
    <li>
        <a href="#" id="liOne">link2</a>
        <ul>
            <li>innerlink1</li>
            <li>innerlink2</li>
        </ul>
    </li>
    <li><a href="#">link3</a></li>
    <li>
        <a href="#" id="liTwo">link4</a>
        <ul>
            <li>innerlink1</li>
            <li>innerlink2</li>
        </ul>
    </li>
</ul>

Jquery的

$("#liOne, #liTwo").click(function(e){
    e.preventDefault();
    return false;
});

甚至是一个班级，而不是id。

这样，您只需要将id / class属性添加到您希望处理click事件的元素，而不是像这样遍历DOM。

选择多个li，它是使用jquery的第一个孩子

5 个答案: