javascript - DOM 如何获取元素在 "queue"中的位置

Question

当我有了

<div id="wrap">
    <ul>
         <li class='first'><img src="something.jpg"></li>
         <p>this would be problem in finding next li</p>
         <li><img src="somethingelse.jpg"></li>
         <li><img src="somethingother.jpg"></li>
         <li><img src="image.jpg"></li>

    </ul>
</div>

如何获取 li 在 ul(父)节点中的元素位置。使用 javascript 的元素(如果有帮助，我正在使用 querySelectorAll )。有属性(property)吗？我想使用 jQuery 之类的方法获取下一个元素:

$('.first').next('li');

如果我使用 .next()它将返回nextElementSibling这是 <p>元素。所以我设法做了这样的事情:

function contains( stack, element ) {
    var res = [];
    // stack would be object (for example NodeList)
    // element is object that is gonna be found
    for ( var i = 0; i < stack.length; i++ ) {
         // do the same for className, nodeName .....
         if ( stack[i]['id'] == element ) {
              push.call( res, stack[i] );
         }
    }

    return res;
}

然后我调用名为 .originate() 的对象函数它创建了我的库的一个实例，并将所有找到的匹配元素放入其中，以便能够在其上使用库方法。

所以 stack 是具有 qSA 返回的所有属性的元素对象。当我调用cba.next('li')时它将找到 cba 父元素中与 .map() 匹配的所有子元素(cba 是通过 element 进行“回调”的元素) arg 在 .find()我需要将这些子元素与 cba 进行比较如果是 'li' (正如我们正在寻找的)，返回 i + 1元素(如果匹配，实际上是下一个元素)。

Answer 1

尝试使用新的matches()方法:

function next(elm, sel) {
    while(elm = elm.nextElementSibling) if(elm.matches(sel)) return elm;
}

用法:

var elm= document.querySelector(".first");
next( elm, "li").innerHTML="HIT!!!";

现场演示http://pagedemos.com/gbkzrde36a5g/

您可以填充和/或使用前缀版本来实现向后兼容，或者如果您只关心的话，只需检查elm.tagName。