Come posso codificare un assegno per vedere se un elemento è il primo o l'ultimo di un genitore?

Question

Ho il seguente menu che può contenere fino a circa 50 articoli e due collegamenti che un utente può utilizzare per navigare verso la città precedente o successiva. Qui per questo esempio sto mostrando solo quattro link di indirizzo.

<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> 

ho avuto qualche aiuto su stack overflow e si avvicinò con il seguente codice:

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

Questo imposta il href del precedente e successivo al valore appropriato quando si fa clic su una delle voci del menu. Funziona ma non per il primo e l'ultimo elemento nell'elenco. Che cosa ho bisogno è questo:

a) Quando il primo elemento viene cliccato vorrei che la #prev cambiare a:

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

b) Quando l'ultimo elemento viene cliccato Vorrei che la # prossimo a cambiare:

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

C'è un modo semplice che potrei fare senza aggiungere troppo codice aggiuntivo?

Answer 1

È possibile controllare la lunghezza oggetto jQuery per lo zero e agire di conseguenza:

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

o un po 'più pulito con una funzione locale per fare il lavoro:

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

Se un elemento elt è il primo dei suoi fratelli, $(elt).prev().length sarà 0.
Se un elemento elt è l'ultimo dei suoi fratelli, $(elt).next().length sarà 0.

Answer 3

È possibile verificare se l'elemento è il primo figlio, o l'ultimo figlio utilizzando il seguente:

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

Se this fatto riferimento il a viene cliccato, ci sarebbe verificare se fosse il primo anello, o il ultimo link nell'elenco verificando se il genitore fosse o meno un primogenito o un ultimo figlio o nessuno dei due.

Inoltre, è possibile basare attribuire-oggetto-off la costruzione di questi valori:

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

});​ 

Si potrebbe ulteriormente costruire gli attributi per le #prev e #next elementi alle vostre esigenze.

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

Answer 4

Un metodo alternativo per eseguire questa operazione è il seguente utilizzando invece un indice o proprietà:

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(); 
    }); 
​