使用jQuery移动多个div或元素

时间:2018-04-10 06:04:31

标签: javascript jquery html

我希望在特定断点处将锚标记移动到具有“name”类的div中。

这是当前的HTML。问题是我有6个“配置文件”需要做同样的事情。

<div class="profile">
  <div class="name">
     <p>Name</p>
  </div>
  <div class="email">
     <a href="example@email.com">example@email.com</a>
  </div>
</div>

我尝试过的所有解决方案都会将每个div中的所有6个锚标签都放在“name”类中。像这样乘以6次:

<div class="profile">
<div class="name">
    <p>Name</p>
    <a href="example@email.com">example@email.com</a>
    <a href="example@email.com">example@email.com</a>
    <a href="example@email.com">example@email.com</a>
    <a href="example@email.com">example@email.com</a>
    <a href="example@email.com">example@email.com</a>
    <a href="example@email.com">example@email.com</a>
</div>
<div class="email">
    <a href="example@email.com">example@email.com</a>
</div>

如何相对于它的“个人资料”移动每个锚标记?

1 个答案:

答案 0 :(得分:0)

您可以使用.each()迭代.profile阻止,然后使用.find()定位所需的元素。

在示例中,我使用了.appendTo()

&#13;
&#13;
$('.profile').each(function() {
  $(this).find('.email a').appendTo($(this).find('.name'));
  $(this).find('.email').remove(); //If you need to remove
});


console.log($('.container').html()) //For debugging
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="profile">
    <div class="name">
      <p>Name 1</p>
    </div>
    <div class="email">
      <a href="example@email.com">example1@email.com</a>
    </div>
  </div>
  <div class="profile">
    <div class="name">
      <p>Name 2</p>
    </div>
    <div class="email">
      <a href="example2@email.com">example2@email.com</a>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;