Jak mogę zakodować kontrolę, aby sprawdzić, czy element jest pierwszy lub ostatni z rodzica?

Question

Mam następujące menu, które może zawierać do około 50 elementów i dwa łącza, za pomocą których użytkownik może nawigować do poprzedniego lub następnego miasta. Tutaj dla tego przykładu pokazuję tylko cztery adresy.

<ul id="menu"> 
    <li><a href="/City/0101004H">1</a></li> 
    <li><a href="/City/0101004I">2</a></li> 
    <li><a href="/City/0101004J">3</a></li> 
    <li><a href="/City/0101004K">4</a></li> 
</ul> 

<a id="prev" href="#"><img width="16" height="16" src="/images/prev.png">Prev</a> 
<a id="next" href="#"><img width="16" height="16" src="/images/next.png">Next</a> 

miałem jakąś pomoc na przepełnienie stosu i wpadł na następujący kod:

fiddle

$("#menu").on('click', 'a[href^="/City"]', function(event) { 
    event.preventDefault(); 
     var prev = $(this).parent().prev().find('a'); 
     var next = $(this).parent().next().find('a'); 
     $('#prev').prop('href', jQuery(prev).prop('href')).prop('title', 'City ' + jQuery(prev).text()); 
     $('#next').prop('href', jQuery(next).prop('href')).prop('title', 'City ' + jQuery(next).text()) 
}); 

Ustawia href poprzedniego i obok odpowiedniej wartości po kliknięciu na jednym z elementów menu. Działa, ale nie dla pierwszego i ostatniego elementu na liście. Co potrzebne jest to:

a) Gdy pierwszy element jest kliknął chciałbym się #prev aby zmienić:

<a id="prev" href="#"><img src="/images/noentry.png"></a> 

b) Kiedy ostatni element jest kliknął Chciałbym # obok zmienić:

<a id="next" href="#"><img src="/images/noentry.png"></a> 

Czy istnieje prosty sposób mogę to zrobić bez dodawania zbyt dużo dodatkowego kodu?

Answer 1

Można sprawdzić długość obiektu jQuery do zera i działać odpowiednio:

$("#menu").on('click', 'a[href^="/City"]', function(event) { 
     event.preventDefault(); 
     var pHref, nHref, pTitle, nTitle; 
     var prev = $(this).parent().prev().find('a'); 
     var next = $(this).parent().next().find('a'); 
     if (prev.length == 0) { 
      pHref = "#"; 
      pTitle = ""; 
     } else { 
      pHref = prev.prop('href'); 
      pTitle = prev.prop('City' prev.text()); 
     } 
     if (next.length == 0) { 
      nHref = "#"; 
      nTitle = ""; 
     } else { 
      nHref = next.prop('href'); 
      nTitle = next.prop('City' prev.text()); 
     } 

     $('#prev').prop('href', pHref).prop('title', pTitle); 
     $('#next').prop('href', nHref).prop('title', nTitle) 
}); 

lub trochę czystsze z lokalnym funkcji do pracy:

("#menu").on('click', 'a[href^="/City"]', function(event) { 

     function setProps(targetSelector, srcObject) { 
      var href, title; 
      if (srcObject.length) { 
       href = srcObject.prop('href'); 
       title = srcObject.prop('title'); 
      } else { 
       href = "#"; 
       title = ""; 
      } 
      $(targetSelector).prop('href', href).prop('title', title); 
     } 

     event.preventDefault(); 
     var p = $(this).parent(); 
     setProps('#prev', p.prev().find('a')); 
     setProps('#next', p.next().find('a')); 
}); 

Answer 2

Jeśli element elt jest pierwszym z jego rodzeństwa, $(elt).prev().length będzie 0.
Jeśli element elt jest ostatnim z jego rodzeństwa, $(elt).next().length będzie 0.

Answer 3

Można sprawdzić, czy element jest pierwszym dzieckiem, lub ostatniego dziecko przy użyciu następujących:

$(this).parent().is(":first-child"); 
$(this).parent().is(":last-child"); 

Jeśli this odwołuje a czym kliknął, chcielibyśmy sprawdzić, czy był to pierwszy link, lub ostatnie łącze na liście poprzez sprawdzenie, czy jego rodzic był pierwszym dzieckiem, czy też ostatnim dzieckiem, czy też nie.

Dodatkowo można oprzeć atrybut-Object-off konstrukcję z tych wartości:

$("#menu").on('click', 'a', function(event) { 

    // Prevent link from taking us anywhere 
    event.preventDefault(); 

    // We'll be referencing the parent numerous times 
    var parent = $(this).parent(); 

    // Determine the new properties of the PREV link 
    var prev = parent.is(":first-child") 
     ? { html: '<img src="/images/noentry.png" />', 
      title: null } 
     : { html: '<img src="/images/prev.png" /> Prev', 
      title: 'City ' + parent.prev().text() } ; 

    // Determine the new properties of the NEXT link 
    var next = parent.is(":last-child") 
     ? { html: '<img src="/images/noentry.png" />', 
      title: null } 
     : { html: '<img src="/images/next.png" /> Next', 
      title: 'City ' + parent.next().text() } ; 

    // Set new attribtes of both PREV and NEXT 
    $("#prev").attr(prev); 
    $("#next").attr(next); 

});​ 

Można dodatkowo konstruować atrybuty dla elementów do swoich potrzeb #prev i #next.

Demo: http://jsfiddle.net/MX94J/1/

Answer 4

Alternatywnym sposobem wykonania tej czynności jest użycie indeksu zamiast lub właściwości:

http://jsfiddle.net/QrE6u/1/

var index = 0; 
var nElements = $('#menu a').length; 

$('#menu a').click(function(e) { 
    e.preventDefault(); 
    index = $(this).parents('ul').find('a').index(this); 
    if (index==0) { 
     $('#prev img').attr('src', '/images/noentry.png'); 
    } 
    if (index==nElements-1) { 
     $('#next img').attr('src', '/images/noentry.png'); 

    } 
    alert(index); 
}); 

    $('#prev').click(function() { 
     index = (index - 1) % nElements; 
     $('#menu a').eq(index).click(); 
    }); 
    $('#next').click(function() { 
     index = (index + 1)% nElements; 
     $('#menu a').eq(index).click(); 
    }); 
​