Question

我有以下标记：

<h4>Option 1</h4>
<p>Foo</p>
<p>Bar</p>
<p>Baz</p>

<h2>Option 2</h4>
<p>abc</p>
<p>def</p>
<p>ghi</p>

...

<h4>Option 1000</h4>
<p>123</p>
<p>456</p>
<p>789</p>

我要实现的目的是，在单击标题时，在.active下的所有<p>标签上添加<h4>类。

使用jquery（3.2.1），我定位<h4>并确定是否已单击它：

$('h4').click(function (e) {

});

我的目的是只将点击的<p>下面的<h4>标签作为目标，而忽略其他任何标签。我看不到如何在jquery中执行此操作，因此不得不向每个系列的选项中添加类，例如

<h4 class="option1">Option 1</h4>
<p class="option1">Foo</p>
<p class="option1">Bar</p>
<p class="option1">Baz</p>

然后我可以读取班级名称。例如，这给出了“ option1”：

$('h4').click(function() {
   var clickedClass = $(this).attr("class");
   console.log(clickedClass); 
});

然后使用clickedClass定位相关元素并应用另一个类，在这种情况下为.active：

$(clickedClass).addClass('active');

尽管这行得通，但似乎让我的标记肿了，因为我为此添加了很多类。

是否存在使用问题开头的一组标记（没有类名）更简单的方法，您可以通过这种方式定位子<p>标记？

其目的是，如果您单击“选项1”，它将仅将.active应用于所单击的元素和子元素<p>，因此结果标记应为

<h4 class="active">Option 1</h4>
<p class="active">Foo</p>
<p class="active">Bar</p>
<p class="active">Baz</p>

<h2>Option 2</h4>
<p>abc</p>
<p>def</p>
<p>ghi</p>

...

<h4>Option 1000</h4>
<p>123</p>
<p>456</p>
<p>789</p>

Answer 1

您需要使用的功能是nextUntil()。它将选择当前和同级之间与提供的选择器匹配的所有元素。

$('h4').click(function(e) {
  $(this).nextUntil('h4').addClass('active');
});

.active {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Option 1</h4>
<p>Foo</p>
<p>Bar</p>
<p>Baz</p>

<h4>Option 2</h4>
<p>abc</p>
<p>def</p>
<p>ghi</p>

<h4>Option 1000</h4>
<p>123</p>
<p>456</p>
<p>789</p>

一组<h4>个元素之间的<p>个元素的jquery目标组

1 个答案: