Замена текста js

297

21 апреля 2017, 20:44

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Task 6</title> 
</head> 
<body> 
    <div class="gold" id="text1"> 
        <ul> 
            <li>1~~2~~3</li> 
        </ul> 
    </div> 
     <div class="gold" id="text1"> 
        <ul> 
            <li>1~~2~~3</li> 
        </ul> 
    </div> 
    <script> 
        var listItems = document.getElementById("text1").getElementsByTagName("LI"); 
        for(var i = 0; i < listItems.length; i++) { 
            var listItem = listItems[i]; 
  
            var listItemContent = listItem.textContent; 
            listItem.innerHTML = listItemContent.split("~~").join("</li><li>"); 
        } 
    </script> 
</body> 
</html>

Как сделать, чтоб замена шла не только первому id? а и остальные

Answer 1

    <div class="gold" id="text1"> 
        <ul> 
            <li>1~~2~~3</li> 
        </ul> 
    </div> 
     <div class="gold" id="text1"> 
        <ul> 
            <li>1~~2~~3</li> 
        </ul> 
    </div> 
    <script> 
        var elements = document.getElementsByClassName('gold'); 
        
        for(var i = 0; i < elements.length; i++) { 
            var el = elements[i].getElementsByTagName("LI"); 
						 
            var listItemContent = el[0].textContent; 
             
             
            el[0].innerHTML = listItemContent.split("~~").join("</li><li>"); 
        } 
    </script>

По id так не получается потому что id должно быть уникальным. Поэтому нужно пользоваться классом например:

document.getElementsByClassName('имя класса');

Получив массив с которым мы уже можем делать что нам нужно.

P.S: компилятор не ругается на одинаковые id ,просто если он нашел первое совпадение, то остальное игнорирует.

Answer 2

var goldDivs = document.querySelectorAll(".gold"); 
 
for (var j = 0; j < goldDivs.length; j++) { 
  if (goldDivs[j].id == "text1") { 
    var listItems = goldDivs[j].querySelectorAll("li"); 
    for (var i = 0; i < listItems.length; i++) { 
      var listItem = listItems[i]; 
      var items = listItem.innerText.split("~~"); 
      for (var k = 0; k < items.length; k++){ 
        var itemChild = document.createElement("li"); 
        itemChild.innerText = items[k]; 
        listItem.parentElement.appendChild(itemChild); 
      } 
      listItem.parentElement.removeChild(listItem); 
       
    } 
  } 
}

<div class="gold" id="text1"> 
  <ul> 
    <li>a~~b~~c</li> 
  </ul> 
</div> 
<div class="gold" id="text1"> 
  <ul> 
    <li>1~~2~~3</li> 
  </ul> 
</div>