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

【问题标题】：How to check if an element is after another element using PrototypeJS?如何使用 PrototypeJS 检查一个元素是否在另一个元素之后？
【发布时间】：2016-12-31 13:43:20
【问题描述】：

这是我的 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 的元素之后的所有列表项。我该怎么做？

【问题讨论】：

标签： javascript css-selectors prototypejs

【解决方案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 或下面的 sn-p。

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() 来简化兄弟HasClasstest

【讨论】：