選擇多個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