Question

我有一组p个标签，我希望substring(0,5)代表数组中的每个p标记，并替换之前的标记。但是我的代码没有正常工作
HTML：

<div class="test1">
     <p class="cls">1.Im try to use the click function </p>
     <p class="cls">2.Im try to use the click function </p>
     <p class="cls">3.Im try to use the click function </p>
</div>

JS：

$(document).ready(function () {
     $('.cls').each(function () {
         var iTotalWords = $(this).text().split(' ');
         for (i = 0 ; i < iTotalWords.length; i++) {
             var result = iTotalWords.substring(0, 50);
             $(".cls").html(result);
         }
     });
});

Answer 1

有几个问题。

您不应该使用通用选择器。您必须使用this的当前元素。

您不需要循环和拆分，因为您获得完整的文本并只是将其子串。

substring（0,50）会让你遇到问题，因为你的String中没有50个字符。你的意思是0,5对吧？

    $(document).ready(function () {
    $('.cls').each(function () {
        var iTotalWords = $(this).text();        
        var result = iTotalWords.substr(0, 5);
        $(this).html(result); });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test1">
    <p class="cls">1.Im try to use the click function </p>
    <p class="cls">2.Im try to use the click function </p>
    <p class="cls">3.Im try to use the click function </p>
</div>

Answer 2

我确定你希望得到5个字符或5个字，所以我已经包含了两个字符。

获取.cls元素，使用.each()进行迭代，并为每个段落获取文本，子字符串或切片以获得所需内容。

＆＃13;

/** five characters **/
$('.test1 .cls').each(function() {
  $(this).text($(this).text().substring(0, 5));
});

/** five words **/
$('.test2 .cls').each(function() {
  $(this).text($(this).text().split(' ').slice(0, 5).join(' '));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test1">
  <p class="cls">1.Im try to use the click function </p>
  <p class="cls">2.Im try to use the click function </p>
  <p class="cls">3.Im try to use the click function </p>
</div>

<div class="test2">
  <p class="cls">1.Im try to use the click function </p>
  <p class="cls">2.Im try to use the click function </p>
  <p class="cls">3.Im try to use the click function </p>
</div>

＆＃13;

Answer 3

好又简单

$(document).ready(function () {
    $('.cls').each(function () {
            console.log("with substr(start,end) ::"+$(this).text().substr(0,4));
    });
});

Answer 4

如果您选择使用纯JS，那么您可以按照以下步骤进行操作;

＆＃13;

document.querySelectorAll('div.test1 > p')
        .forEach(p => p.textContent = p.textContent.substr(0,5));

＆＃13;

<div class="test1">
  <p class="cls">1.Im try to use the click function </p>
  <p class="cls">2.Im try to use the click function </p>
  <p class="cls">3.Im try to use the click function </p>
</div>

＆＃13;

如何对数组中每个标记p的5个字符进行子串？

4 个答案: