第一个li的jQuery选择器

问题描述：

当用户点击第一个li aka（Any Date）时，我需要一个onclick事件。如何使用jQuery选择该元素？第一个li的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>

你会更快找到答案在谷歌比这里的代码输入整个问题... – instead

答

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

答

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

答

那么它有一个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(){});

第一个li的jQuery选择器

相关推荐