Get: первый и: последний с JQuery

Question

У меня была эта проблема:

Я пытался сделать щебетать эффект, поэтому при нажатии на нее, проверяет, является ли это либо :first или :last, и если он нет, создайте margin-top и margin-bottom точно так же, как в хронологическом порядке Twitter. I хочу создать этот эффект при нажатии любой из «Одна фраза здесь».

Основная проблема заключалась в том, что мой код jQuery не обнаружил :first и :last. Я уже пробовал также с :first-child, и он сделал то же самое.

Используя этот HTML код:

<div class="phrases-container"> 
    <div class="phrases-title">Titulo</div> 
    <div class="phrases-list"> 
     <div class="phrases-item zooming">First child</div> 
     <div class="phrases-item zooming">One phrase</div> 
     <div class="phrases-item zooming">One phrase</div> 
     <div class="phrases-item zooming">Last child</div> 
    </div> 
    <div class="phrases-load-more"> 
     <a class="link loadMore">Get more phrases!</a> 
    </div> 
</div> 

Используя этот JQuery код, я мог бы это исправить. Спасибо за вашу помощь! (:

$(".zooming").live('click', function(){ 
    var $z = $('.zooming'); 
    index = $z.index(this); 
    var bradiust = $(this).css("borderTopLeftRadius"); 
    if (bradiust == '0px') 
     var thand = "show"; 
    else 
     var thand = "hide"; 
    if (thand == "show"){ 
     if (index == 0){ 
      alert("This is the first"); 
     }else 
     if (index == ($z.length-1)){ 
      alert("This is the last"); 
     }else{ 
      alert("This is just another"); 
     } 
    }else{ 
     if (index == 0){ 
      alert("This is the first"); 
     }else 
     if (index == ($z.length-1)){ 
      alert("This is the last"); 
     }else{ 
      alert("This is just another"); 

     } 
    } 

}); 

Answer 1

Я не совсем уверен, что случилось с :first, но как об этом:

var $z = $('.zooming'), 
    index = $z.index(this); 

if (index == 0 || index == ($z.length-1)) { 
    return false; 
} 

Answer 2

Не обманывайте селектором :first Jquery:

Описание: выбирает первый согласованный элемент.
Первый псевдокласс эквивалентен: eq (0)

Вы должны использовать селектор :first-child

Answer 3

насчет объединения:

if ($(this).is(':first') || $(this).is(':last')) 

Но заметьте: http://api.jquery.com/is/

Начиная с JQuery 1.7, селектор строк с позиционными селекторов применить селектор против документа, а затем определить, является ли первым элементом текущий набор jQuery соответствует любому из итоговых элементов . Таким образом, для HTML, показанного выше, выражение, такое как $ («li: first»). Is («li: last») возвращает false.

Answer 4

$(document).on('click', '.zooming', function(){ 
    var L = $('.zooming').length-1; 
    var I = $(this).index(); 
    if (I===0 || I==L) { 
     return false; 
    }else{ 
     var bradiust = $(this).css("borderTopLeftRadius"); 
     if (bradiust == '0px') { 
      var thand = "show"; 
     }else{ 
      var thand = "hide"; 
     } 
     alert(thand); 
    } 
});​