[英]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
和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>
編輯:
如果你的 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.