Обращение к первому / последнему элементу в ul, li

#jquery

Вопрос:

Как вы проверяете, является ли элемент DOM, на который нажимается, ‘первым’ элементом li или ‘последним’ элементом li в элементе неупорядоченного списка??

1. Вы уверены, что не имеете в виду последний li в ul ?

2. ДА. Я хочу сказать, что. li в ul.

3. Я просмотрел код, который у вас был, прежде чем вы изменили свой вопрос. Является ли щелкаемый элемент img в li ?

4. ДА. Это img. Я использовал как $('.item img').click()

Ответ №1:

Основываясь на вашем вопросе в том виде, в каком он появился перед вашим редактированием, а также на ваших комментариях, кажется, что вы реагируете на li img щелчок и пытаетесь выяснить, является ли это содержащее li первым или последним дочерним элементом.

Используйте .is() вместе с .closest() для проверки:

 $('ul li img').click(function() {
    var $li = $(this).closest('li');

    if ($li.is(':first-child')) {
        // First
    } else if ($li.is(':last-child')) {
        // Last
    }
});

1. нужен ли ‘$’ в ‘$li’?

2. @ptamzz: Нет, для меня просто личное соглашение обозначать переменные jQuery с помощью $ . Вы можете сказать что-то еще вроде var li = $(this).closest('li'); и просто использовать li в вашем if и else if .

Ответ №2:

попробуйте это:

 <ul class="myUnorderedList"><li>First</li><li>Last</li></ul>

js:

 $('.myUnorderedList li').click(function(){

   if($(this).is(':first')) console.log('first li');
   if($(this).is(':last')) console.log('last li');

})

Ответ №3:

Используйте first() и last():

 $('#ulid > li').first();
$('#ulid > li').last();

1. как это помогает при нажатии fn?

2. Внутри обработчика щелчков вы могли бы просто сверить объект, на который щелкнули, с первым () или последним() …

3. Вы не можете? Это интересно. Я бы подумал, что объекты jQuery являются одиночными, что означает, что он создаст только один объект-оболочку для элемента DOM. Но поскольку объекты jQuery являются коллекциями, то это на самом деле не имеет смысла.

4. Я смог это сделать, просто нужно использовать [0] после объектов. Проверьте jsFiddle .

Ответ №4:

Если это ваш код:

 <ul class="myUnorderedList"><li>First</li><li>Last</li></ul>

Затем вы можете получить к нему доступ с помощью первого селектора (http://api.jquery.com/first-selector /) или последнего селектора (введите описание ссылки здесь) следующим образом:

 <script>$(".myUnorderedList>li:first").css("font-style", "italic");</script>

<script>$(".myUnorderedList>li:last").css("font-style", "italic");</script>

Ответ №5:

Возможно, это могло бы помочь

 <ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

С помощью этого кода jquery

 $("li").click(function(){
   if ($("li:first").text() == $(this).text() ){
      alert("first");
   }
  if ($("li:last").text() == $(this).text() ){
     alert("last");
  }
});

Смотрите это на http://jsfiddle.net/GT7Mm