如何使用 jquery 将 <br> 的上一个和下一个同级文本与 div 换行?
How to wrap previous and next sibling text of <br> with div using jquery?
以下 HTML 结构已给出且无法更改:
<div id="cone" class="team">
<div class="default"></div>
...
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0"> First Text line<br> Second text line (optional)
<img src="img.jpg" width="271" height="271" alt="" border="0"> First Text line<br> Second text line (optional) ...
</div>
</div>
我想使用 jQuery 获得以下结果:
<div id="cone" class="team">
<div class="default"></div>
...
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0">
<div class="desc">
First Text line<br> Second text line (optional)
</div>
<img src="img.jpg" width="271" height="271" alt="" border="0">
<div class="desc">
First Text line<br> Second text line (optional)
</div>
...
</div>
</div>
我试过:
$(".team img").each(function () {
$(this.nextSibling).wrap('<div class="desc"></div>');
});
但这只包含第一行:
<img src="fileadmin/dateien/bilder/team/platzhalter_team.jpg" width="271" height="271" alt="" border="0">
<div class="desc">First Text line</div>
<br>
Second text line (optional)
重要提示:<img>
标签后可以有一行,两行,甚至三行文本。
您需要在 .default
中迭代 br
元素并在循环中添加新标签。您可以使用 Node.previousSibling
and Node.nextSibling
属性 获取元素的 previous/next 文本兄弟。
$(".default > br").each(function(){
// Store previous/next sibling of br in variable then remove it.
var prev = $(this.previousSibling).remove()[0].textContent;
var next = $(this.nextSibling).remove()[0].textContent;
// Insert new tag before br.
$(this).before("<div class='desc'>" + prev + "<br>" + next + "</div>");
}).remove(); // Remove br after loop
$(".default > br").each(function(){
var prev = $(this.previousSibling).remove()[0].textContent;
var next = $(this.nextSibling).remove()[0].textContent;
$(this).before("<div class='desc'>" + prev + "<br>" + next + "</div>");
}).remove();
.desc { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cone" class="team">
<div class="default"></div>
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)
...
</div>
</div>
编辑:
如果您的 html 有多个 <br>
,您需要将 br 替换为自定义文本,并在换行后将目标文本替换为 <br>
。在示例中,我使用了 [br]
.
$(".default").html(function(i, html){
return html.replace(/<br>/g, "[br]");
});
$(".default > img").each(function(){
$(this.nextSibling).wrap('<div class="desc"></div>');
});
$(".default").html(function(i, html){
return html.replace(/\[br\]/g, "<br>");
});
$(".default").html(function(i, html){
return html.replace(/<br>/g, "[br]");
});
$(".default > img").each(function(){
$(this.nextSibling).wrap('<div class="desc"></div>');
});
$(".default").html(function(i, html){
return html.replace(/\[br\]/g, "<br>");
});
.desc { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cone" class="team">
<div class="default"></div>
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)<br>
Third text line
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)<br>
Third text line
...
</div>
</div>
您可以将id添加到“br”,并按id列表wrapAll
<div id="id1">First</div><br id="id2">
<div id="id2">Second</div><br>
<div id="id3">First</div><br id="id4">
<script>
$("#id1,#id2,#id3,#id4").wrapAll("<div class='wraped'></div>")
</script>
以下 HTML 结构已给出且无法更改:
<div id="cone" class="team">
<div class="default"></div>
...
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0"> First Text line<br> Second text line (optional)
<img src="img.jpg" width="271" height="271" alt="" border="0"> First Text line<br> Second text line (optional) ...
</div>
</div>
我想使用 jQuery 获得以下结果:
<div id="cone" class="team">
<div class="default"></div>
...
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0">
<div class="desc">
First Text line<br> Second text line (optional)
</div>
<img src="img.jpg" width="271" height="271" alt="" border="0">
<div class="desc">
First Text line<br> Second text line (optional)
</div>
...
</div>
</div>
我试过:
$(".team img").each(function () {
$(this.nextSibling).wrap('<div class="desc"></div>');
});
但这只包含第一行:
<img src="fileadmin/dateien/bilder/team/platzhalter_team.jpg" width="271" height="271" alt="" border="0">
<div class="desc">First Text line</div>
<br>
Second text line (optional)
重要提示:<img>
标签后可以有一行,两行,甚至三行文本。
您需要在 .default
中迭代 br
元素并在循环中添加新标签。您可以使用 Node.previousSibling
and Node.nextSibling
属性 获取元素的 previous/next 文本兄弟。
$(".default > br").each(function(){
// Store previous/next sibling of br in variable then remove it.
var prev = $(this.previousSibling).remove()[0].textContent;
var next = $(this.nextSibling).remove()[0].textContent;
// Insert new tag before br.
$(this).before("<div class='desc'>" + prev + "<br>" + next + "</div>");
}).remove(); // Remove br after loop
$(".default > br").each(function(){
var prev = $(this.previousSibling).remove()[0].textContent;
var next = $(this.nextSibling).remove()[0].textContent;
$(this).before("<div class='desc'>" + prev + "<br>" + next + "</div>");
}).remove();
.desc { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cone" class="team">
<div class="default"></div>
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)
...
</div>
</div>
编辑:
如果您的 html 有多个 <br>
,您需要将 br 替换为自定义文本,并在换行后将目标文本替换为 <br>
。在示例中,我使用了 [br]
.
$(".default").html(function(i, html){
return html.replace(/<br>/g, "[br]");
});
$(".default > img").each(function(){
$(this.nextSibling).wrap('<div class="desc"></div>');
});
$(".default").html(function(i, html){
return html.replace(/\[br\]/g, "<br>");
});
$(".default").html(function(i, html){
return html.replace(/<br>/g, "[br]");
});
$(".default > img").each(function(){
$(this.nextSibling).wrap('<div class="desc"></div>');
});
$(".default").html(function(i, html){
return html.replace(/\[br\]/g, "<br>");
});
.desc { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cone" class="team">
<div class="default"></div>
<div class="default">
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)<br>
Third text line
<img src="img.jpg" width="271" height="271" alt="" border="0">
First Text line<br>
Second text line (optional)<br>
Third text line
...
</div>
</div>
您可以将id添加到“br”,并按id列表wrapAll
<div id="id1">First</div><br id="id2">
<div id="id2">Second</div><br>
<div id="id3">First</div><br id="id4">
<script>
$("#id1,#id2,#id3,#id4").wrapAll("<div class='wraped'></div>")
</script>