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

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两次选择已经得到了另一个ul里面的一个li项目的元素和onclick事件添加到它。这工作正常。但是有没有办法减少我的代码并使其更加干净？

Answer 1

所以，你不希望李包含一个UL孩子，所以我认为这会是这样

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

小提琴可以发现火灾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

是的，添加的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属性添加到要处理的点击事件的元素上，而不是像那样遍历DOM。

Answer 5

请试试这个。

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

下面是这个的小提琴。

Js Fiddle

在上面我申请 “的onclick” 事件到所有的锚。如果你只想应用那个有孩子的李，那么代码就是这样的。

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

下面是LI与UI元素选择的链接。

li with ul onclick