Найти текст внутри позиции, добавить соответствующий идентификатор для этой позиции - PullRequest
Новая
       4

Найти текст внутри позиции, добавить соответствующий идентификатор для этой позиции

0 голосов
/ 29 мая 2018

Я пытаюсь написать JQuery, чтобы получить содержимое элемента списка (LI) в пределах определенного идентификатора, и для каждого LI добавить идентификатор, равный тексту в LI.

Другими словами, сделайте каждый LI адресуемым в CSS, используя его собственное текстовое содержимое в качестве идентификатора.Я не лучший в JQuery, как вы можете догадаться, поэтому не уверен в следующих шагах.Я дошел до HTML / JQuery, как показано ниже.

В идеале он будет игнорировать первый LI, заменять пробелы и любые специальные символы дефисом.

HTML: 

<div id="services">
   <div class="box">
        <ul>
            <li><button type="button">CLOSE</button></li>
            <li>Irrigation</li>
            <li>Transport</li>
            <li>Construction</li>
            <li>Import & distribution</li>
            <li>Iwi</li>
            <li>Tourism</li>
            <li>Logistics</li>
            <li>Education</li>
         </ul>
   </div>
</div>

JS: 

jQuery(document).ready(function($) {
   $( "#services .box li" ).each(function( index ) { //for each relevant LI on the page...
      //if not the first LI / not containing a <button>, then...
      var one_id = $(this).text();
      one_id = one_id.replace(/[^a-zA-Z0-9]/g,'-');
      $(this).attr('id', one_id);
   });
})

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Может исключить любого, у которого есть кнопка или первый ребенок, использующий not() и обрезать лишние -, когда вы получаете кратные

Что-то вроде: 

$("#services .box li").not(':has(button),:first-child').each(function() {
  var one_id = $(this).text().replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-');
  $(this).attr('id', one_id).append(' => ID: ' + one_id);// remove append in production
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="services">
  <div class="box">
    <ul>
      <li><button type="button">CLOSE</button></li>
      <li>Irrigation</li>
      <li>Transport</li>
      <li>Construction</li>
      <li>Import & distribution</li>
      <li>Iwi</li>
      <li>Tourism</li>
      <li>Logistics</li>
      <li>Education</li>
    </ul>
  </div>
</div>
0 голосов
/ 29 мая 2018

Этот код уже делает то, что вы хотите сделать. eq selector , необходимый для выбора первого или другого элемента ul. 

jQuery(document).ready(function($) {
   $( "div.box > ul:eq(0) > li:not(:first)" ).each(function( index ) { 
      $(this).attr('id', $(this).text().replace(/[^a-zA-Z0-9]/g,'-'));
   });
})
...