如何将多个跨度包装到一个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的所有元素，然后循环遍历每个元素。

希望对你有帮助