Jquery 遍历相同的元素,获取内容并逐个元素重新排列内容
Jquery loop through same elements, get content and rearrange content element by element
我有几个 html-article-elements。都具有相同的 classes。在每篇文章中,都有一个带有 class 的段落,名为 "iwantyou"。我想获取这一段的innerHTML/content放在文章的最前面
我试着简单地循环。但这给了我页面上所有 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>
你快到了,使用.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>
您可以提供 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>
我有几个 html-article-elements。都具有相同的 classes。在每篇文章中,都有一个带有 class 的段落,名为 "iwantyou"。我想获取这一段的innerHTML/content放在文章的最前面
我试着简单地循环。但这给了我页面上所有 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>
你快到了,使用.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>
您可以提供 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>