मैं यह देखने के लिए चेक कैसे कोड कर सकता हूं कि कोई तत्व माता-पिता का पहला या अंतिम है या नहीं?

Question

मेरे पास निम्न मेनू है जिसमें लगभग 50 आइटम और दो लिंक हो सकते हैं जो उपयोगकर्ता पिछले या अगले शहर में नेविगेट करने के लिए उपयोग कर सकते हैं। यहां इस उदाहरण के लिए मैं सिर्फ चार पता लिंक दिखा रहा हूं।

<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 सेट जब मैं क्लिक करें मेनू आइटम में से एक पर। यह सूची में पहली और आखिरी वस्तुओं के लिए काम करता है लेकिन नहीं। क्या मैं जरूरत यह है:

क) पहला आइटम मैं पर क्लिक किया जाता है जब #prev चाहते हैं बदलने के लिए:

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

ख) जब अंतिम आइटम क्लिक किया जाता है पर मैं # चाहते हैं इसके आगे बदलने के लिए:

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

क्या कोई आसान तरीका है कि मैं बहुत अधिक अतिरिक्त कोड जोड़ने के बिना ऐसा कर सकता हूं?

Answer 1

आप शून्य के लिए jQuery वस्तु लंबाई की जांच और उसके अनुसार कार्य कर सकते हैं:

("#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().length0 होगा।
यदि कोई तत्व elt अपने भाई बहनों का अंतिम भाग है, $(elt).next().length0 होगा।

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

:

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

या एक स्थानीय समारोह के साथ एक छोटे से क्लीनर काम करने के लिए

ऐसा करने का एक वैकल्पिक तरीका इसके बजाय इंडेक्स या गुणों का उपयोग कर निम्न है:

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