[英]How to wrap previous and next sibling text of <br> with div using jquery?
Following HTML structure is given and cannot be changed:以下 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>
I want to get to the following result using jQuery:我想使用 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>
I have tried:我试过:
$(".team img").each(function () {
$(this.nextSibling).wrap('<div class="desc"></div>');
});
But this only wraps the first line:但这仅包含第一行:
<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)
Important: There can be one line, two lines, even three lines of text after the <img>
Tag.重要提示: <img>
标签后可以有一行、两行、甚至三行文字。
You need to iterate br
element in .default
and add your new tag in loop.您需要在.default
迭代br
元素并在循环中添加新标签。 You can get previous/next text sibling of element using Node.previousSibling
and Node.nextSibling
property.您可以使用Node.previousSibling
和Node.nextSibling
属性获取元素的上一个/下一个文本同级。
$(".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>
Edit:编辑:
If your html has multiple <br>
, you need to replace br with custom text and after wrap, replace target text to <br>
.如果你的 html 有多个<br>
,你需要用自定义文本替换 br 并在换行后,将目标文本替换为<br>
。 In example i used [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>
You can ad id to "br", and wrapAll by id list您可以将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.