如何檢查一個元素是否在使用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); 
     } 
}); 

，但是這顯然是行不通的。

我想添加到所有列表項後面的元素測試。我怎樣才能做到這一點 ？

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