如何將多個跨度包裝到一個 div 中

Question

我有一個 JS 代碼，它將所有行都包裝成一個跨度。 我知道我想使用wrapall但不知道從哪里開始。 現在我試圖找到一種方法來將這些跨度中的每一個都包裝到一個 div 中，但將總共限制為 4 個跨度。 因此，例如，如果我有 5 個跨度，我將如何將 4 個跨度包裝到一個 div 中，並將最后一個包裝到一個 div 中，如下所示：

<div class="wrap">
 <span class="line_wrap"></span>
 <span class="line_wrap"></span>
 <span class="line_wrap"></span>
 <span class="line_wrap"></span>
</div>
<div class="wrap">
 <span class="line_wrap"></span>
</div>

工作示例：

 $(".emails .multi-items").each(function (i) { var $cont = $('.content') var text_arr = $cont.text().split(' '); for (i = 0; i < text_arr.length; i++) { text_arr[i] = '<span>' + text_arr[i] + ' </span>'; } $cont.html(text_arr.join('')); $wordSpans = $cont.find('span'); var lineArray = [], lineIndex = 0, lineStart = true, lineEnd = false $wordSpans.each(function(idx) { var pos = $(this).position(); var top = pos.top; if (lineStart) { lineArray[lineIndex] = [idx]; lineStart = false; } else { var $next = $(this).next(); if ($next.length) { if ($next.position().top > top) { lineArray[lineIndex].push(idx); lineIndex++; lineStart = true } } else { lineArray[lineIndex].push(idx); } } }); //console.log( lineArray) for (i = 0; i < lineArray.length; i++) { var start = lineArray[i][0], end = lineArray[i][1] + 1; /* no end value pushed to array if only one word last line*/ if (!end) { $wordSpans.eq(start).wrap('<span class="line_wrap">') } else { $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">'); } }; });

 .line_wrap{ border-top: 1px solid green} .message-contain {padding:35px 0}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="emails"> <ul class="multi-items"> <div class="message-contain"> <div class="content"> Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it's a cold world out there. The other day the grass was brown, now it's green because I ain't give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don't want you to have lunch. I'm keeping it real with you, so what you going do is have lunch. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don't want you to have lunch. </div> </div> <div class="message-contain"> <div class="content"> Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it's a cold world out there. The other day the grass was brown, now it's green because I ain't give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don't want you to have lunch. I'm keeping it real with you, so what you going do is have lunch. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don't want you to have lunch. </div> </div> </ul> </div>

Answer 1

給你一個解決方案

 $(".emails .multi-items").each(function (i) { var $cont = $('.content') var text_arr = $cont.text().split(' '); for (i = 0; i < text_arr.length; i++) { text_arr[i] = '<span>' + text_arr[i] + ' </span>'; } $cont.html(text_arr.join('')); $wordSpans = $cont.find('span'); var lineArray = [], lineIndex = 0, lineStart = true, lineEnd = false $wordSpans.each(function(idx) { var pos = $(this).position(); var top = pos.top; if (lineStart) { lineArray[lineIndex] = [idx]; lineStart = false; } else { var $next = $(this).next(); if ($next.length) { if ($next.position().top > top) { lineArray[lineIndex].push(idx); lineIndex++; lineStart = true } } else { lineArray[lineIndex].push(idx); } } }); for (i = 0; i < lineArray.length; i++) { var start = lineArray[i][0], end = lineArray[i][1] + 1; /* no end value pushed to array if only one word last line*/ if (!end) { $wordSpans.eq(start).wrap('<span class="line_wrap">') } else { $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">'); } }; var line_wrap = $(".line_wrap"); for(var i=-1; i<line_wrap.length; i=i+4) { $('.line_wrap:eq('+i+'),.line_wrap:eq('+(i-1)+'),.line_wrap:eq('+(i-2)+'), .line_wrap:eq('+(i-3)+')').wrapAll('<div class="wrap">'); } });

 .line_wrap{ border-top: 1px solid green} .message-contain {padding:35px 0}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="emails"> <ul class="multi-items"> <div class="message-contain"> <div class="content"> Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it's a cold world out there. The other day the grass was brown, now it's green because I ain't give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don't want you to have lunch. I'm keeping it real with you, so what you going do is have lunch. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don't want you to have lunch. </div> </div> </ul> </div>

添加到您的代碼中的其他以下代碼

var line_wrap = $(".line_wrap");

for(var i=-1; i<line_wrap.length; i=i+4) {
  $('.line_wrap:eq('+i+'),.line_wrap:eq('+(i-1)+'),.line_wrap:eq('+(i-2)+'), .line_wrap:eq('+(i-3)+')').wrapAll('<div class="wrap">');

}

使用line_wrap類獲取所有元素，然后循環遍歷每個元素。

希望能幫到你