.insert перед созданием дубликатов - PullRequest
Новая
       16

.insert перед созданием дубликатов

0 голосов
/ 07 июня 2018

Я пытаюсь использовать .insertBefore, чтобы переместить элемент вперед на один уровень выше его.Конечно, проблема, с которой я сталкиваюсь, заключается в том, что он дублирует содержимое, потому что все мои родительские 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>

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Во-первых, у вас не должно быть дубликатов.Измените id="post-item" на class="post-item".$("#post-item") выберет только первый, а не повторы, потому что идентификаторы предполагаются уникальными.

Затем, чтобы решить вашу проблему, используйте $(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>
0 голосов
/ 07 июня 2018

Привет, вы зацикливаетесь на каждом пост-элементе 

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

Теперь есть еще одна проблема: вы используете id, который выбирает только один элемент dom, вам нужно либо переименовать post-item из idКласс, как показано ниже 

<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/

...