JQuery 选择器为第一列

JQuery selectors for first li

本文关键字：一列 选择器 JQuery      更新时间：2023-09-26

当用户单击第一个li aka（任何日期）时，我需要一个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>

您可以使用 jquery ：first 选择器来定位元素集合中的第一个元素。 

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

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

或 jquery first（） filter ： 

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

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

嗯，

它有一个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 选择器。

注意：虽然 ：first 只匹配单个元素，但 ：first 子元素 选择器可以匹配多个：每个父项一个。

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

您可以使用 ：第一个孩子

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

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

1. 使用 jQuery：第 n 个子选择器它使用元素的位置选择元素的子元素。值 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
	});

看到这个： 获取 li 的第一个元素 使用 jquery 作为实时示例。

相关文章：