第一個 li 的 JQuery 選擇器

Question

我需要一個 onclick 事件，當用戶點擊第一個 li aka（任何日期）時。如何使用 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選擇器來定位元素集合中的第一個元素。

$('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

那么它有一個id所以你可以在你的選擇器中使用它。 你定位的li里面的link對嗎？

$("#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 選擇器。

注意：雖然 :first 只匹配單個元素，但 :first-child 選擇器可以匹配多個：每個父元素一個。

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

Answer 3

您可以使用: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 4

您可以使用下面給出的任何方法來選擇第一個 li 元素。

1. 使用 jQuery :nth-child 選擇器它使用元素的位置選擇元素的子元素。 值 1 選擇位於第一個位置的 li 項。

 $( "ul li:nth-child(1)" ).click(function(){ //do something here });

2. 使用 jQuery :first selector它選擇第一個 li 項。

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

3. 使用 jQuery :eq() 選擇器li 元素從索引 0 開始。要選擇第一項，您必須使用 0 作為其值。

 $( "ul li:eq(0)" ).click(function(){ //do something here });

請參閱： 獲取 li 的第一個元素，使用 jquery獲取實時示例。