Question

我正在解析一段生成的HTML。粗略地说，我对此问题感兴趣的部分看起来像这样：

<div class="rowset">
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <br><h2>WOWZA</h2><br>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
</div>

我需要一种方法来选择在两个单独的操作中出现在WOWZA之前的div和出现在WOWZA之后的div。 WOWZA之前和之后始终至少有一个div，并且它们始终具有相同的“ head”类。头div的数量因行集而异。

WOWZA文本是恒定的，永不改变。我只是不知道在这种情况下如何将其用作分隔符？

如有必要，我也可以使用jquery选择器。

Answer 1

我相信您必须为此使用jQuery，因为CSS3当前尚无法通过文本内容选择元素。但是，使用jQuery，我们可以使用.contains()

要在文本后的中选择元素：

您可以使用~，General sibling combinator

通用同级组合器（〜）分隔两个选择器并进行匹配第二个元素仅在第一个元素之后（尽管不是且必须是立即），并且两者都是同一个父母的孩子元素。

要选择文本中之前的元素，

我们可以使用jQuery的.not()从集合中排除$afterWowza中的元素

let $afterWowza = $('.rowset h2:contains("WOWZA") ~ .head');
let $beforeWowza = $('.rowset .head').not($afterWowza);

$beforeWowza.css('background-color', 'blue');
$afterWowza.css('background-color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rowset">
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <br><h2 class="wowza">WOWZA</h2><br>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
</div>

Answer 2

您可以使用jQuery选择器：$("br ~ h2")

或者，用ID将HTML <span>或<div>包裹在行周围，然后使用jQuery选择器：$("#idname")

给定元素之前和之后的元素的CSS选择器

2 个答案: