如何编码检查以查看元素是父项的第一个还是最后一个？

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>

我在堆栈溢出方面有一些帮助,并提出了以下代码:

小提琴

$("#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设置为适当的值.它可以工作但不适用于列表中的第一个和最后一个项目.我需要的是这个:

a)当点击第一个项目时,我希望#prev更改为:

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

b)当单击最后一项时,我希望#next更改为:

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

有没有一种简单的方法可以做到这一点,而无需添加太多额外的代码？

Answer 1

您可以测试元素是第一个子元素,还是使用以下内容的最后一个子元素:

$(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 2

您可以检查 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'));
});