JS代码仅在第一组文本的范围内换行，其余部分不这样做[重复]

Posted 2023-05-07

【中文标题】JS代码仅在第一组文本的范围内换行，其余部分不这样做[重复]

【英文标题】：JS code only wraps lines in a span on the first set of text, doesn't do it for the rest [duplicate]

【发布时间】：2020-06-14 09:26:25

【问题描述】：

我有一个从“Detect browser wrapped lines via javascript”获得的 JS 代码，它将每一行包装成一个 <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 id="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.
      </div>
  </div>
<div class="message-contain">
  <div id="content">
  Fan luv. You smart, you loyal, you a genius. We don’t see them, we will never see them. 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. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. The key to more success is to have a lot of pillows. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion!
  </div>
</div>
</ul>
</div>

【问题讨论】：

ID 必须是唯一的，$('#content') 只会找到具有该 ID 的第一个 DIV。

【参考方案1】：

您的 HTML 无效 - 文档中应该只有一个具有特定 ID 的元素，因此 $('#content') 只能找到第一个 #content。

改用类，并选择.contents with

$(".emails .multi-items .content").each(function() 
  var $cont = $(this);
  // ...

$(".emails .multi-items .content").each(function() 
  var $cont = $(this);

  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.
      </div>
    </div>
    <div class="message-contain">
      <div class="content">
        Fan luv. You smart, you loyal, you a genius. We don’t see them, we will never see them. 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. A major key, never panic. Don’t panic,
        when it gets crazy and rough, don’t panic, stay calm. The key to more success is to have a lot of pillows. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Let me be clear,
        you have to make it through the jungle to make it to paradise, that’s the key, Lion!
      </div>
    </div>
  </ul>
</div>

【参考方案2】：

您两次使用了 ID content。把它改成一个类就可以了。

$(".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.
      </div>
  </div>
<div class="message-contain">
  <div class="content">
  Fan luv. You smart, you loyal, you a genius. We don’t see them, we will never see them. 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. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. The key to more success is to have a lot of pillows. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion!
  </div>
</div>
</ul>
</div>