要素が親の最初か最後かをチェックするにはどうすればよいですか？

Question

私は、ユーザーが前の都市または次の都市に移動するために使用できる約50項目と2つのリンクを持つことができる次のメニューを持っています。ここでは、4つのアドレスリンクを示しています。

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

私は、スタックオーバーフロー上のいくつかの助けを持っていたし、次のコードを思い付いた：

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

私がクリックしたときにこれは前と適切な値に次のhrefを設定し、メニュー項目の1つでオンにします。それは動作しますが、リストの最初と最後の項目では機能しません。私に必要なのはこれです：最初の項目がクリックされると

A）私は#prevがに変更したいと思います：最後の項目はI上でクリックされたとき

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

b）は＃を希望します次に変更する：

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

余計なコードを追加することなくこれを行うことができますか？

Answer 1

あなたがゼロのためのjQueryオブジェクトの長さをチェックし、それに応じて行動することができます。

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

や仕事をするために地元の機能に少しクリーナーを：

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

要素eltがその兄弟の最初の要素である場合、$(elt).prev().lengthは0になります。
要素eltが最後の兄弟である場合、$(elt).next().lengthは0になります。

Answer 3

要素を使用して最初の子、または最後の子である場合は、テストすることができ、次の

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

thisがaがクリックされて参照した場合、我々はそれが最初のリンクだったかどうかをテストする、またはだろうその親が最初の子か最後の子かどちらかであるかどうかをテストすることによって、リスト内の最後のリンクを検索します。

はまた、あなたは、これらの値のオフ属性オブジェクトの建設ベースでした：

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

});​ 

あなたはさらに、あなたのニーズに#prevと#next要素の属性を構築することができます。

デモ：http://jsfiddle.net/MX94J/1/

Answer 4

これに代わる方法は、代わりにインデックスまたはプロパティを使用する次のような方法です。

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