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>

如何在ul（父）节点中获得li元素位置。使用javascript的元素（如果它有帮助，我使用querySelectorAll）。有财产吗？我想使用像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()的Object函数，该函数创建了我的库的一个实例，并将所有找到的匹配元素放在上面。

因此，堆栈是具有qSA返回的所有属性的元素的对象。当我调用cba.next('li')时，它会在cba的父元素（cba是＆＃34;回调＆＃34;元素到.map()）中找到匹配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是否就是你所关心的。

Answer 2

在jQuery中，获得li之后的ul > li.first，结果证明是这样的：

$('ul > li') .get( $('ul > li') .index( $('ul > li.first') ) + 1 ) )

此

$('ul > li.first').next()`

不起作用，因为.next从DOM中检索元素索引。

由于某种原因，这也不是：

$('ul > li').parent().find('li.first').next()`

但是，这样做，我们得到n：

var s =  $('ul > li'),    
    l = s.parent().find('li.first'),
    i = s.index( l ),
    n = s.get( i + 1 );

＆＃13;

var s =  $('ul > li'),    
    l = s.parent().find('li.first'),
    i = s.index( l ),
    n = s.get( i + 1 );

$(
 $('ul > li')
 .get(
   $('ul > li')
   .index( 
     $('ul > li.first')
   )
   + 1
 )
)
.css({color:'red'})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
    <ul>
         <li class='first'>first</li>
         <p>this would be problem in finding next li</p>
         <li class='second'>second</li>
         <li>third</li>
         <li>fourth</li>

    </ul>
</div>

＆＃13;

DOM如何在＆＃34; queue＆＃34;

2 个答案: