Question

我觉得我很想念一些合乎逻辑的见解。这似乎很容易，但我只是没有看到它..

我有一个列表，想要查看点击项目之前和/或之后是否有列表项目。这是代码


<script>
[..]
$("a").click(function(event){
 var parentEl = $(this).closest("ul");
 var currPosition = $(this).parent().prevAll().length + 1;
 var totalItems = $("#"+$(parentEl).attr("id")+" li").length;

 if(currPosition == totalItems){ alert("Previous and Next"); }
 if(currPosition <= totalItems){ alert("Next"); }
 if(currPosition >= totalItems){ alert("Previous"); } 
[..]
</script>

[..]

<ul id="listOne">
 <li><a>Text 1</a></li>
 <li><a>Text 2</a></li>
 <li><a>Text 3</a></li>
 <li><a>Text 4</a></li>
</ul>

上面的代码几乎只有一个我点击最后一项，一切都得到警告.. 我只是想知道点击列表中是否存在上一个，下一个或两个选项

Answer 1

让您的生活更轻松，并使用index()找到目前的位置。

$("a").click(function() {
  var li = $(this).closest("li");
  var items = li.parent().children();
  var currPosition = items.index(li);
  var totalItems = items.length();
  if (currPosition == 0) {
    // first
  } else if (currPosition == totalItems.length - 1) {
    // last
  } else {
    // middle
  }
});

或者，你可以做这样的测试：

if (li.is(":first-child")) {
  // first
} else if (li.is(":last-child")) {
  // last
} else {
  // in the middle
}

Answer 2

快速修复：

if(currPosition == totalItems){ 
  alert("Previous"); 
} else if(currPosition == 1){ 
  alert("Next"); 
} else {
  alert("Previous and Next");
}

Answer 3

您可以使用.nextAll()，.prevAll()和.length进行查询，如下所示：

$("a").click(function(event){
  var pCount = $(this).closest('li').prevAll().length, //how many previous
      nCount = $(this).closest('li').nextAll().length; //how many after
  if(pCount > 0 && nCount > 0){ alert("Previous and Next"); }
  else if(nCount > 0){ alert("Next"); }
  else if(pCount > 0){ alert("Previous"); } 
});

You can give it a try here，当然你可以缩短它，但是试图说明计数的来源，这种方法不仅可以告诉你是以前/后面的元素比如.prev()和.next()，但多少，如果这一点很重要的话。

Answer 4

只是在父母李之前或之后检查他们是否是项目的情况。

$("a").click(function(){
      var itemsBefore = ($(this).parent().prev().length>0)
      var itemsAfter = ($(this).parent().next().length>0)
      if(itemsBefore && itemsAfter) alert("Previous and next");
      else if(itemsBefore) alert("Previous");
      else alert("Next");
  });

在这里工作小提琴 - ＆gt; http://jsfiddle.net/wmgvB/

列表顺序的逻辑问题

4 个答案: