我想将 .main-section-image
的全部内容移动到 .main-section .content .title
之前。但是当我使用我的 jQuery 代码时,所有其他 div 的内容都是重复的。
如何使用 if 条件来防止重复文本添加到该区域?
$('.main-section-image').insertBefore('.main-section .content .title');
.duo-left {float: left;}
.duo-right {float: right;}
.main-section {width: 100%; float: left;}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>
最佳答案
您要在 all .content .title
元素之前插入 all .main-section-image
元素.
由于您有多个 .main-section
元素,每个元素都包含自己的图像和标题,因此会在所有标题之前插入多个图像。
我建议使用 jQuery 的 each()
分别在 .main-section
中进行更改。
下面,我使用 jQuery 的 selector context ,它使用 find() .
我还添加了一个按钮和 click
处理程序来执行插入操作。
但这只是为了演示,所以请随意删除该代码。
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target);
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
编辑
你问的是改完之后怎么加类(class)。您可以使用 jQuery 的 addClass()
.
由于 insertBefore
返回一个 jQuery 对象,您可以在之后链接 addClass
,如下所示:
$image.insertBefore($target).addClass('another-class');
这是一个演示:
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target).addClass('another-class');
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
.another-class {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
关于javascript - 防止 insertBefore 复制内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55043928/