Question

我有这样的结构：

<div class="document-content" contenteditable="true">
<h2>Heading 1</h2>
<p>Content</p>
<h2>Heading 2</h2>
<p>Content</p>
</div>

如何循环该div中的每个h2标签？

我能做的最好的事情就是只找到h2个标签中的一个：

$('.document-content').find('h2').html()

我需要找到所有内容，以便我可以为每个人添加类或ID。

Answer 1

您可以使用each()功能：

$('.document-content').find('h2').each(function() {
  var that = $(this);
  that.addClass('custom-class');
  // more code here..
  // that.find('.another-element').addClass('test');
});

.custom-class {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="document-content" contenteditable="true">
<h2>Heading 1</h2>
<p>Content</p>
<h2>Heading 2</h2>
<p>Content</p>
</div>

Answer 2

不使用 .find（）

$('.document-content>h2').each(function() {
  var that = $(this);
  that.addClass('custom-class');
});

.custom-class {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="document-content" contenteditable="true">
  <h2>Heading 1</h2>
  <p>Content</p>
  <h2>Heading 2</h2>
  <p>Content</p>
</div>

Answer 3

我需要找到所有内容，以便我可以为每个人添加类或ID。

你在这里甚至不需要.each()，正如其他答案所说的那样。 .html()返回集合中第一个元素的HTML内容。但是，.addClass('myClass')之类的内容将适用于集合中的所有元素。因此，要向所有人添加.myClass，您可以执行以下操作：

$('.document-content h2').addClass('myClass')

（根据this answer，.find()并非真正必要。）

Answer 4

（imo）您不需要find()功能。您可以使用此功能（与each()结合使用）

$('.document-content h2').each( function() {
    $(this).css('color', 'red');
});

同时检查此JSFiddle

Answer 5

您需要h2类中的每个document-content代码，因此您需要使用jQuery的h2函数迭代每个.each()代码，以查找所有h2代码和addClass它。

$("div.document-content").find("h2").each(function(){
   $(this).addClass("your_class");
});

在div内的每个h2标签上循环

5 个答案: