Jquery l oop через одни и те же элементы, получать контент и переставлять контент по элементам - PullRequest
Новая
       17

Jquery l oop через одни и те же элементы, получать контент и переставлять контент по элементам

1 голос
/ 16 апреля 2020

У меня есть несколько html -article-элементов. У всех одинаковые классы. Внутри каждой статьи есть параграф с классом «iwantyou». Я хочу получить innerHTML / содержимое этого абзаца и поместить его в начало статьи.

Я пытался просто l oop. Но это дает мне содержание ВСЕХ iwantyou-divs на странице. Таким образом, в каждой статье у меня есть текст всех iwantyou-div со страницы вместе, но мне нужен только один в статье.

Вот код: 

$(document).ready(function() {

        $('.category-material').each(function(index, value) {
          	$('.iwantyou').each(function(index, value) {
            	$(".summery").append($(value).text());
            });	
        });
    
});
h1 {
  font-weight:bold;
}

div {
  color:blue;
  
}

.summery {
  color:red;
}

p {
  color:grey;
}

span {
  text-decoration:underline;
  color:grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<article class="category-material">
  <h1>Numerber One </h1>
    <div class="summery">
      <span>Here the text from iwantyou of first article should go:</span>
    </div>

<p class="iwantyou"> summery no one</p>
<p>not touched</p>
  
</article>
<hr>

<article class="category-material">
<h1> Number Two </h1>
<div class="summery">
  <span>Here text from iwantyou of second article should go:</span>
</div>

<p class="iwantyou">Summery no two</p>
<p> not touched </p>

</article>

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Вы можете предоставить context в качестве второго аргумента для селектора jQuery, чтобы они не были глобальными и находились в пределах элемента (ов), по которому вы перебираете. 

$(document).ready(function() {
  $('.category-material').each(function(index, category) {
    $('.iwantyou', category).each(function(index, iwantyou) {
      $(".summery", category).append($(iwantyou).text());
    });
  });
});
h1 {
  font-weight: bold;
}

div {
  color: blue;
}

.summery {
  color: red;
}

p {
  color: grey;
}

span {
  text-decoration: underline;
  color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<article class="category-material">
  <h1>Numerber One </h1>
  <div class="summery">
    <span>Here the text from iwantyou of first article should go:</span>
  </div>

  <p class="iwantyou"> summery no one</p>
  <p>not touched</p>

</article>
<hr>

<article class="category-material">
  <h1> Number Two </h1>
  <div class="summery">
    <span>Here text from iwantyou of second article should go:</span>
  </div>

  <p class="iwantyou">Summery no two</p>
  <p> not touched </p>

</article>
0 голосов
/ 16 апреля 2020

Вы почти там, используйте .find: 

$(document).ready(function() {
  $('.category-material').each(function(index, value) {
    $(this).find(".summery").append($(this).find(".iwantyou").text());
  });
});
h1 {
  font-weight: bold;
}

div {
  color: blue;
}

.summery {
  color: red;
}

p {
  color: grey;
}

span {
  text-decoration: underline;
  color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<article class="category-material">
  <h1>Numerber One </h1>
  <div class="summery">
    <span>Here the text from iwantyou of first article should go:</span>
  </div>

  <p class="iwantyou"> summery no one</p>
  <p>not touched</p>

</article>
<hr>

<article class="category-material">
  <h1> Number Two </h1>
  <div class="summery">
    <span>Here text from iwantyou of second article should go:</span>
  </div>

  <p class="iwantyou">Summery no two</p>
  <p> not touched </p>

</article>
...