如何将多个跨度包装成 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">');

}

获取所有带class的元素line_wrap然后循环遍历每个元素

希望对您有所帮助

如何将多个跨度包装成 div

How to wrap multiple spans into a div

javascript

jquery

split

wrapall