Question

我有一个div列表，每个列表包含一个div类item和一个p类text。我试图使用jQuery将每个p.text元素移动到其各自的div兄弟中。这就是我的尝试：

＆＃13;

$('.text').prependTo('.item');

＆＃13;

<div class="container">
    <p class="text">Sample text.</p>
    <div class="item">
      <p>More text</p>
    </div>
  </div>

  <div class="container">
    <p class="text">Sample text.</p>
    <div class="item">
      <p>More text</p>
    </div>
  </div>

  <div class="container">
    <p class="text">Sample text.</p>
    <div class="item">
      <p>More text</p>
    </div>
  </div>


<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

＆＃13;

似乎收集了所有三个p元素，并将三个元素放入每个div中，创建了九个p元素，如下所示：

<!-- Undesired result -->
<div class="container">
    <div class="item"><p class="text">Sample text.</p><p class="text">Sample text.</p><p class="text">Sample text.</p>
          <p>More text</p>
     </div>
</div>

<div class="container">
    <div class="item"><p class="text">Sample text.</p><p class="text">Sample text.</p><p class="text">Sample text.</p>
        <p>More text</p>
    </div>
</div>

<div class="container">
    <div class="item"><p class="text">Sample text.</p><p class="text">Sample text.</p><p class="text">Sample text.</p>
        <p>More text</p>
    </div>
</div>

有没有办法使用jQuery来获取每个p元素并将其移动到其各自的兄弟div元素中，从而产生以下结果？

<!-- Desired result -->
<div class="container">
    <div class="item">
        <p class="text">Sample text.</p>
        <p>More text</p>
    </div>
</div>

<div class="container">
    <div class="item">
        <p class="text">Sample text.</p>
        <p>More text</p>
    </div>
</div>

<div class="container">
    <div class="item">
        <p class="text">Sample text.</p>
        <p>More text</p>
    </div>
</div>

Answer 1

它似乎收集了所有三个p元素，并将三个元素放入每个div中，创建了9个p元素。

是的，这就是jQuery要求它做的事情。 :-)它说＆＃34;查找所有.text元素，并将它们全部添加到所有.item元素中，并根据需要制作克隆。＆＃34;来自prependTo documentation：

但是，如果有多个目标元素，则将为除最后一个目标之外的每个目标创建插入元素的克隆副本。

所有这些jQuery方法就属于这种情况。

相反，你需要一个循环：

$('.text').each(function() {
  var elm = $(this);
  elm.prependTo(elm.nextAll('.item').first());
});

或者如果你知道它真的是下一个兄弟姐妹：

$('.text').each(function() {
  var elm = $(this);
  elm.prependTo(elm.next());
});

示例（我已经为.item元素添加了边框，以便您可以看到文本移入其中）：

＆＃13;

setTimeout(function() {
  $("#legend").text("AFTER");
  $('.text').each(function() {
    var elm = $(this);
    elm.prependTo(elm.nextAll('.item').first());
  });
}, 600);

＆＃13;

.item {
  border: 1px solid black;
}

＆＃13;

<div id="legend">BEFORE</div>
<div class="container">
  <p class="text">Sample text.</p>
  <div class="item">
    <p>More text</p>
  </div>
</div>

<div class="container">
  <p class="text">Sample text.</p>
  <div class="item">
    <p>More text</p>
  </div>
</div>

<div class="container">
  <p class="text">Sample text.</p>
  <div class="item">
    <p>More text</p>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

＆＃13;

如何使用jquery

1 个答案: