Question

在复杂结构中获取下一个元素时，我有很大的困惑。

复杂结构：

<p>before data</p>

<div>
   <p>some data <span id="getnext"></span></p>
</div>    

<div>
    <p>some data <span><ins>inserted</ins></span></p>
</div>    

<div>
   <div>
      <p>some data <span><del>deleted</del></span></p>
   </div>
</div>   

<div>
   <div>
       <ol>
             <li>Some changes made<span data-change="get">in this place</span></li>
       </ol>    
   </div>
</div>

这是我机器上的复杂结构。

我希望获得包含ins，del，span[data-change="get"]

的所有下一个元素

目前，我身份是"getnext"。

我尝试以下方式来做到这一点。

var arr_ = $('#getnext').next('ins,del,span[data-change="get"]');

但是，这不是很好。我现在在做什么？

请提出任何想法或建议。

最大结构变体：

<p>some data <span id="getnext"></span>extra data<ins>some data</ins></p>

<p>deleted<span><del>some data</del></span> data</p>

<ol>
  <li><ins>list insert</li>

  <ul>
     <li><del>deleted</del></li> 
  </ul>

</ol>

<div>
  <p><span data-change="get">changed data</span>
</div>

Answer 1

您需要先转到closest（父级） div

$('#getnext').closest( "div" );

然后检查那些有孩子next，div等的ins del元素

$('#getnext').closest( "div" ).nextAll( "div:has(ins,del,span[data-change='get'])" );

或

$('#getnext').closest( "p" ).nextAll( "p").has("ins,del,span[data-change='get']" ) ;

<强>演示

var output = $('#getnext').closest("div").nextAll("div:has(ins,del,span[data-change='get'])");
console.log(output.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>before data</p>

<div>
  <p>some data <span id="getnext"></span></p>
</div>

<div>
  <p>some data <span><ins>inserted</ins></span></p>
</div>

<div>
  <div>
    <p>some data <span><del>deleted</del></span></p>
  </div>
</div>

<div>
  <div>
    <ol>
      <li>Some changes made<span data-change="get">in this place</span></li>
    </ol>
  </div>
</div>

JQUERY：在复杂结构中找到下一个元素的困惑

1 个答案: