Question

我正在寻找一种方法来组织一些渲染内容。我无法编辑原始模板以执行此操作。每个问题div都有一个部分编号，我想包装所有具有相同编号的问题。

这是呈现的内容：

  <div class="question">
    <div class="section-number">1</div>
    <p>Some Content</p>
  </div>
  <div class="question">
    <div class="section-number">1</div>
    <p>Some Content</p>
  </div>
  <div class="question">
    <div class="section-number">2</div>
    <p>Some Content</p>
  </div>
  <div class="question">
    <div class="section-number">2</div>
    <p>Some Content</p>
  </div>

希望它是这样的：

  <div class="section">
    <div class="question">
      <div class="section-number">1</div>
      <p>Some Content</p>
    </div>
    <div class="question">
      <div class="section-number">1</div>
      <p>Some Content</p>
    </div>
  </div>

  <div class="section">
    <div class="question">
      <p class="section-number">2</div>
      <div>Some Content</p>
    </div>
    <div class="question">
      <div class="section-number">2</div>
      <p>Some Content</p>
    </div>
  </div>

Answer 1

这是一种方法：

var $q = $('.question');
$q.each(function () {
    var $this = $(this);
    if ($this.parent('.section').length) return;

    var n = $this.children('.section-number').text();
    $q.filter(function () {
        return $(this).children('.section-number').text() === n;
    }).wrapAll('<div class="section">');
});

组织/包装多个div，如果它们包含特定的div

1 个答案: