Question

这是我的HTML代码：

<ul class="tabs">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li class="test">Test</li>
    <li>Test</li>
</ul>

这就是我的尝试：

 $$('ul.tabs > li').each(function(item,index){
       if ($(item).isAfter(".test")){
           alert(1);
       }
 });

但这显然不起作用。

我想要添加到具有类 test 的元素之后的所有列表项。我怎么能这样做？

Answer 1

您可以使用Element.previousSiblings

$$('ul.tabs li').each(function(item,index){
     if (item.previousSiblings().any(siblingHasClassTest)){
       alert(1);
     }
});
function siblingHasClassTest(sibling) { 
  return sibling.hasClassName('test');
}

有关演示，请参阅this plunker或下面的代码段。

＆＃13;

function findItems() {
  $$('ul.tabs > li').each(function(item, index) {
    if (item.previousSiblings().any(siblingHasClassTest)) {
      //alert(1);
      $('debug').innerHTML += 'element after test - index: ' + index + '<br />';
    }
  });
}

function siblingHasClassTest(sibling) {
  return sibling.hasClassName('test');
}
Event.observe(document, 'dom:loaded', findItems);

＆＃13;

.test {
  border: 1px solid #00f;
}

＆＃13;

<script data-require="prototype@*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<ul class="tabs">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li class="test">Test</li>
  <li>Test</li>
</ul>
<div id="debug"></div>

＆＃13;

也许您可以利用Function#curry()来简化siblingHasClasstest

如何使用PrototypeJS检查元素是否在另一个元素之后？

1 个答案: