Question

我有几个称为“ box”的div。在每个“框”中，我有3个div，并且我想在第一个div的前面加上jquery（.prepend）。

我有那个jQuery

$('.image').prepend($('.header'));

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

所有“标题”都出现在每个“图像”中但是我只想在图像中有相应的标题。

Answer 1

这是您无法使用毯子set(target_sources source1.c source2.c ) list(TRANSFORM target_sources PREPEND "src/foo/")的时候，您会发现，每个元素都会被附加。

在以下情况下，我们使用$(el).append()：

each

现在$('.box').each(function(){ // Code here });是指所讨论的特定$(this)。

.box

我是$('.box').each(function(){ // find the header inside this image var $header = $(this).find('.header'); var $image = $(this).find('.image'); // Prepend to this instance this header $image.prepend($header); });和each的忠实拥护者，强烈建议您在文档中同时看一下它们：

https://api.jquery.com/find/
http://api.jquery.com/jquery.each/

Answer 2

使用此代码，它将起作用。

$(document).ready(function(){
$('.box').each(function(){
  // find the header inside this image
  var $header = $(this).find('.header'); 
  // Prepend to this instance this header
  $(this).find('.image').prepend($header);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

强文本

Answer 3

使用每个循环遍历所有图像。希望这可以帮助

lock

$('.image').each(function(e){

$(this).prepend($(this).next());

})

在其他相同类div的div中添加div

3 个答案: