使用 jquery 检索具有相同类的两个 div 之间的 Html 数据答案

【问题标题】：Retrieve Html datas between two div with same classes with jquery使用 jquery 检索具有相同类的两个 div 之间的 Html 数据
【发布时间】：2020-08-19 21:19:06
【问题描述】：

如何在两个具有相同类但没有像这里这样的子级的 div 之间检索 HTML 数据：

<div class="scene"> EXT.PARK.DAY </div>
<div class="action"> He is walking fast.</div>
<div class="character">JOHN</div>
<div class="dialog">I have to hurry!</div>
<div class="scene">INT.WAITING ROOM.DAY</div>

例如，检索 div 与场景类之间的所有内容的查询结果将是检索所有这些：

<div class="action"> He is walking fast.</div>
<div class="character">JOHN</div>
<div class="dialog">I have to hurry!</div>

如何使用 Jquery 获取这些元素？

【问题讨论】：

到目前为止您尝试过什么？请分享您的代码
api.jquery.com/nextuntil
这能回答你的问题吗？ jQuery selectors: select two elements, and all elements in between

标签： html jquery css

【解决方案1】：

你可以使用 jQuery 的nextUntil()

$(".scene")
  .nextUntil(".scene")
  .css("background-color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<div class="scene"> EXT.PARK.DAY </div>
<div class="action"> He is walking fast.</div>
<div class="character">JOHN</div>
<div class="dialog">I have to hurry!</div>
<div class="scene">INT.WAITING ROOM.DAY</div>

【讨论】：

如果您将任何元素放在第二个场景类 div 之后，此解决方案将不起作用。
你知道如何使用 Cheerio js 实现同样的目标吗？

【解决方案2】：

如果您想在场景类之间的元素上应用一些 css，请参见下面的解决方案。

var childs = document.body.children;
for(var i = $('.scene').index() + 1; i < childs.length; i++) {
    if($(childs[i]).hasClass('scene')){
      break;
    }
    $(childs[i]).css('color', 'red');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="scene"> EXT.PARK.DAY </div>
<div class="action"> He is walking fast.</div>
<div class="character">JOHN</div>
<div class="dialog">I have to hurry!</div>
<div class="scene">INT.WAITING ROOM.DAY</div>

如果您想在场景类 div 之间获取元素并将其放入另一个 div 中，则使用以下代码。

function extract() {
  var childs = document.body.children;
  var extracted_elements = '';
  for (var i = $('.scene').index() + 1; i < childs.length; i++) {
    if ($(childs[i]).hasClass('scene')) {
      break;
    }
    
    extracted_elements += $(childs[i])[0].outerHTML;
  }
  $('.extracted_elements').html(extracted_elements);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="scene"> EXT.PARK.DAY </div>
<div class="action"> He is walking fast.</div>
<div class="character">JOHN</div>
<div class="dialog">I have to hurry!</div>
<div class="scene">INT.WAITING ROOM.DAY</div>
<br />
<button onclick="extract()">Extract</button>
<hr>
<div class="extracted_elements">
</div>

【讨论】：