Question

我试图使用.insertBefore将元素移动到高于它的几个级别之前。当然，我遇到的问题是它重复了内容，因为我的父div都有相同的类，我无法改变。如何为每个div运行.insertBefore而不影响其他div？我需要将标题放在图像框架上方。

这是我到目前为止所拥有的。谢谢！

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){
   $("#post-item").each(function(){
    $(".post-title").insertBefore(".image_frame");
});
});
</script>
</head>
<body>

<div id="post-item">
<p class="image_frame">Was on top</p>
<p class="otherDiv">Middle Stuff</p>
<p class="post-title">Was on bottom</p>
</div>

<div id="post-item">
<p class="image_frame">Was on top1</p>
<p class="otherDiv">Middle Stuff</p>
<p class="post-title">Was on bottom1</p>
</div>

<div id="post-item">
<p class="image_frame">Was on top2</p>
<p class="otherDiv">Middle Stuff</p>
<p class="post-title">Was on bottom2</p>
</div>

Answer 1

嗨，你正在循环每个后期项目

$(document).ready(function(){
   $("#post-item").each(function(){
    $(this).find(".post-title").insertBefore(".image_frame");
});
});

现在还有一个问题，你正在使用id，它只选择一个dom元素，你需要将id中的post-item重命名为类，如下所示

<div class="post-item">
<p class="image_frame">Was on top</p>
<p class="otherDiv">Middle Stuff</p>
<p class="post-title">Was on bottom</p>
</div>

<div class="post-item">
<p class="image_frame">Was on top1</p>
<p class="otherDiv">Middle Stuff</p>
<p class="post-title">Was on bottom1</p>
</div>

<div class="post-item">
<p class="image_frame">Was on top2</p>
<p class="otherDiv">Middle Stuff</p>
<p class="post-title">Was on bottom2</p>
</div>

jquery代码

$(document).ready(function(){
   $(".post-item").each(function(){
   var post=  $(this).find(".post-title");
   var frame = $(this).find(".image_frame");
   post.insertBefore(frame);
});
});

找到另一种选择所有后期项目的方法

我纠正了https://jsfiddle.net/shyamjoshi/xpvt214o/204223/

Answer 2

首先，您不应该有重复的ID。将id="post-item"更改为class="post-item"。 $("#post-item")只会选择第一个，而不是重复，因为ID被认为是唯一的。

然后，要解决您的问题，请使用$(this).find()仅引用迭代当前元素中的项目。

$(document).ready(function() {
  $(".post-item").each(function() {
    $(this).find(".post-title").insertBefore($(this).find(".image_frame"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-item">
  <p class="image_frame">Was on top</p>
  <p class="otherDiv">Middle Stuff</p>
  <p class="post-title">Was on bottom</p>
</div>

<div class="post-item">
  <p class="image_frame">Was on top1</p>
  <p class="otherDiv">Middle Stuff</p>
  <p class="post-title">Was on bottom1</p>
</div>

<div class="post-item">
  <p class="image_frame">Was on top2</p>
  <p class="otherDiv">Middle Stuff</p>
  <p class="post-title">Was on bottom2</p>
</div>

.insert在创建重复项

2 个答案: