Question

当用户点击第一个li（任意日期）时，我需要一个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选择器来定位元素集合中的第一个元素。

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

注意：while：first只匹配一个元素，即：first-child 选择器可以匹配多个：每个父项一个。

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

Answer 4

您可以使用下面提供的任何方法来选择第一个li元素。

1。使用jQuery：nth-child选择器 它使用其位置选择元素的子级。值1选择位于第一个位置的li项目。

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

2。使用jQuery：第一个选择器 它选择第一个li项目。

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

3。使用jQuery：eq（）选择器 li元素以索引0开头。要选择第一项，请使用0作为其值。

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

请参见：Get the First Element of li Using jquery以获取实时示例。

第一个li的JQuery选择器

4 个答案: