最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - JQuery selectors for first li - Stack Overflow

programmeradmin2浏览0评论

I need an onclick event, when the user clicks on the first li aka(Any Date).How do I select that element using 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>

I need an onclick event, when the user clicks on the first li aka(Any Date).How do I select that element using 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>
Share Improve this question edited Mar 16, 2016 at 22:48 DinoMyte 8,8681 gold badge20 silver badges27 bronze badges asked Mar 16, 2016 at 22:47 RamyaRamya 1171 gold badge1 silver badge12 bronze badges 0
Add a ment  | 

4 Answers 4

Reset to default 4

You can use jquery :first selector to target the 1st element in a collection of elements.

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

Example : https://jsfiddle/3mb8ep19/

or jquery first() filter :

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

Example : https://jsfiddle/3mb8ep19/1/

Well it has an id so you can use that in your selector. You are targeting the link inside the li correct?

$("#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
});

Otherwise for something more generic you can use the :first-child selector.

Note : While :first matches only a single element, the :first-child selector can match more than one: one for each parent.

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

You can use :first-child

$("ul.ui-menu li.ui-menu-item:first-child").on("click", function() {
  $(this).css("background", "red");
});
<script src="https://ajax.googleapis./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>

You can use any of the methods given below to select first li element.

1. using jQuery :nth-child selector It selects the child of the element using its position. The value 1 select the li item located at first position.

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

2. using jQuery :first selector It selects the first li item.

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

3. using jQuery :eq() selector The li element starts with index 0. To select first item, you have use 0 as its value.

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

See this: Get the First Element of li Using jquery for live examples.

发布评论

评论列表(0)

  1. 暂无评论