第一個li的jQuery選擇器

Question

當用戶點擊第一個li aka（Any Date）時，我需要一個onclick事件。如何使用jQuery選擇該元素？

<ul id="ui-id-1" class="ui-menu ui-widget ui-widget-content" role="menu" tabindex="0" aria-activedescendant="ui-id-5"> 
    <li class="ui-menu-item" id="ui-id-2" tabindex="-1" role="menuitem"> 
    <a href="#">Any Date</a></li> 
    <li class="ui-menu-item" id="ui-id-3" tabindex="-1" role="menuitem"> 
    <a href="#">Past 7 days</a></li> 
    <li class="ui-menu-item" id="ui-id-4" tabindex="-1" role="menuitem"> 
    <a href="#">Past month</a></li> 
    <li class="ui-menu-item" id="ui-id-5" tabindex="-1" role="menuitem"> 
    <a href="#">Past year</a></li> 
</ul> 

Answer 1

您可以使用jQuery :first選擇爲目標的第1個要素元素的收藏。

$('ul li:first').click(function() 
{ 
    // do something 
}); 

實施例：https://jsfiddle.net/3mb8ep19/

或jquery的first()濾波器：

$('ul li').first().click(function() 
{ 
    // do something 
}); 

實施例：https://jsfiddle.net/3mb8ep19/1/

Answer 2

可以使用:first-child

$("ul.ui-menu li.ui-menu-item:first-child").on("click", function() { 
 
    $(this).css("background", "red"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="ui-id-1" class="ui-menu ui-widget ui-widget-content" role="menu" tabindex="0" aria-activedescendant="ui-id-5"> 
 
    <li class="ui-menu-item" id="ui-id-2" tabindex="-1" role="menuitem"> 
 
    <a href="#">Any Date</a> 
 
    </li> 
 
    <li class="ui-menu-item" id="ui-id-3" tabindex="-1" role="menuitem"> 
 
    <a href="#">Past 7 days</a> 
 
    </li> 
 
    <li class="ui-menu-item" id="ui-id-4" tabindex="-1" role="menuitem"> 
 
    <a href="#">Past month</a> 
 
    </li> 
 
    <li class="ui-menu-item" id="ui-id-5" tabindex="-1" role="menuitem"> 
 
    <a href="#">Past year</a> 
 
    </li> 
 
</ul>

Answer 3

那麼它有一個id所以你可以用在你的選擇。你的目標是li裏面的鏈接是否正確？

$("#ui-id-2 a").click(function(){ 
// function goes here 

return false; // the link itself has a behaviour associated with it so we want to stop that 
}); 

否則對於更通用的東西，您可以使用：first-child選擇器。

注意：雖然：第一匹配僅單個元件，所述：第一胎 選擇器可以匹配多於一個：一個用於每個父。

$("ul.ui-menu li:first-child a").click(function(){});