Замените текст li с помощью jquery без изменения других элементов

ProgramBox

Замените текст li с помощью jquery без изменения других элементов

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь заменить содержимое 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. Это ошибка в приведенном выше примере

Кто-нибудь может мне помочь с этим, пожалуйста?

Ответ №1:

 $(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>

1. привет @Aishwarya, мне нужно добавлять «на лету» для всех элементов li

2. Нет, var b = «Plag», вы добавляете этот текст, но мне нужно извлечь первые 4 символа слова

3. привет @Aishwarya, почему вы добавляете var b = «Plag», это заменит все li, мне нужно получить текст каждого li и добавить первые 4 символа в конце каждого из li с исходным текстом

4. Прямо сейчас он добавляет плагин для всех li

5. Я проверяю 2 миллиона.

Ответ №2:

Вместо клонирования попробуйте заменить 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>

Ответ №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>

Ответ №4:

Я надеюсь помочь вам с этим кодом :

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

пример кода: https://jsfiddle.net/3w4j8q16/1 /