Question

我正在尝试替换li和标签的内容。

尝试以下代码。

<html>
   <head>Sample</head>
   <body>
    <a href="#"><input type="checkbox" class="layer-input-filter" name="testname">Test <span class="count">5</span>      </a>

    <a href="#"><input type="checkbox" class="layer-input-filter" name="testname1">Test1 <span class="count">10</span> </a>

    <ul>
      <li><a href="#" rel="noopener">Mixed assessment guidelines</a></li>
      <li><a href="" target="_blank" rel="noopener">Specimen </a></li>
      <li><a href="#" rel="noopener">Plagiarism </a></li>
      <li><a href="" target="_blank" rel="noopener">Download </a></li>
      <li><a href="#" rel="noopener">Qualification update</a></li>
      <li><a href="" target="_blank" rel="noopener">Specimen</a></li>
      <li><a href="#" rel="noopener">Exam guide update</a></li>
      <li><a href="" target="_blank" rel="noopener">Guide </a></li>
    </ul>

    <script>
      $(document).ready(function($) {
        var value = 0.4;
        $("body").find('li').each(function (index) {
            if ($(this).text() != '') {
              var str = $(this).clone().children().remove().end().text();
              var newstring =  str + str.substring(0, str.length  * value);
              $(this).text(newstring);
            }
        });
      });
    </script>
   </body>
</html>

我需要替换体内每个li的文字。因此在jquery上面使用它。但这不起作用。

示例：

<li><a href="#" rel="noopener">Plagiarism </a></li>

应替换为

<li><a href="#" rel="noopener">PlagiarismPlag </a></li>

每个li文本的前四个字符。在上面的示例中为标记

有人可以帮我吗？

Answer 1

尝试克隆li > a的文本而不是克隆。无需先测试字符串是否为空，因为如果为空，则现有文本（空字符串）将不会更改：

var value = 0.4;
$("body").find('li > a').each(function(index) {
  const text = $(this).text();
  const newText = text + text.slice(0, Math.floor(text.length * value));
  $(this).text(newText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#"><input type="checkbox" class="layer-input-filter" name="testname">Test <span class="count">5</span> </a>

<a href="#"><input type="checkbox" class="layer-input-filter" name="testname1">Test1 <span class="count">10</span> </a>

<ul>
  <li><a href="#" rel="noopener">Mixed assessment guidelines</a></li>
  <li><a href="" target="_blank" rel="noopener">Specimen </a></li>
  <li><a href="#" rel="noopener">Plagiarism </a></li>
  <li><a href="" target="_blank" rel="noopener">Download </a></li>
  <li><a href="#" rel="noopener">Qualification update</a></li>
  <li><a href="" target="_blank" rel="noopener">Specimen</a></li>
  <li><a href="#" rel="noopener">Exam guide update</a></li>
  <li><a href="" target="_blank" rel="noopener">Guide </a></li>
</ul>

Answer 2

$(document).ready(function($) {
  $('li>a').each(function(index, element) {
    var b = "Plag"
    var data = $(this).text(); // it will give 1,2,3 
    var position = (data.substring(0, 4))
    var output = [data, position].join('');
    $(this).empty().append("<a/>" + output);
    return index < 3;
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#"><input type="checkbox" class="layer-input-filter" name="testname">Test <span class="count">5</span> </a>

<a href="#"><input type="checkbox" class="layer-input-filter" name="testname1">Test1 <span class="count">10</span> </a>

<ul>
  <li><a href="#" rel="noopener">Mixed assessment guidelines</a></li>
  <li><a href="" target="_blank" rel="noopener">Specimen </a></li>
  <li><a href="#" rel="noopener">Plagiarism </a></li>
  <li><a href="" target="_blank" rel="noopener">Download </a></li>
  <li><a href="#" rel="noopener">Qualification update</a></li>
  <li><a href="" target="_blank" rel="noopener">Specimen</a></li>
  <li><a href="#" rel="noopener">Exam guide update</a></li>
  <li><a href="" target="_blank" rel="noopener">Guide </a></li>
</ul>

Answer 3

在您的情况下，您可以像这样使用。试试这个

$(document).ready(function($) {

    $("body").find('li').each(function (e) {
        if ($(this).text() != '') {

            var str = $(this).text();
            var newstring =  str.substring(0, 4) + str;
            $(this).children('a')[0].innerHTML = newstring;
        }
    });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#"><input type="checkbox" class="layer-input-filter" name="testname">Test <span class="count">5</span>      </a>

    <a href="#"><input type="checkbox" class="layer-input-filter" name="testname1">Test1 <span class="count">10</span> </a>
            
    <ul>
        <li><a href="#" rel="noopener">Mixed assessment guidelines</a></li>
        <li><a href="" target="_blank" rel="noopener">Specimen </a></li>
        <li><a id="btnChange" href="#" rel="noopener">Plagiarism </a></li>
        <li><a href="" target="_blank" rel="noopener">Download </a></li>
        <li><a href="#" rel="noopener">Qualification update</a></li>
        <li><a href="" target="_blank" rel="noopener">Specimen</a></li>
        <li><a href="#" rel="noopener">Exam guide update</a></li>
        <li><a href="" target="_blank" rel="noopener">Guide </a></li>
    </ul>

Answer 4

我希望为您提供以下代码：

    var str = $(this).find('a').text();
    var newStr = str + str.substr(0, 4);
    $(this).find('a').text(newStr)

示例代码：https://jsfiddle.net/3w4j8q16/1/

使用jquery替换li文本，而无需更改其他元素

4 个答案: