jQuery遍历相同的元素，获取内容并逐元素重新排列内容

Question

我有几个html-article-elements。全部具有相同的类。每篇文章中都有一个段落，其中包含一个名为“ iwantyou”的类。我想获取本段的innerHTML /内容并将其放在文章的顶部。

我试图简单地循环。但这给了我页面上所有iwantyou-div的内容。因此，结果是，在每篇文章中，我都会组合页面中所有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>

Answer 1

您快到了，用.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>

Answer 2

您可以将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>