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

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或下面的代码片段。

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

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

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

也许你可以利用Function#curry()简化该siblingHasClasstest