2

<!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? а и остальные

8
  • 1
    ид должен быть уникальным в пределах страницы
    – Alex
    20 апр 2017 в 20:27
  • У вас два раза id="text1", что есть ошибка
    – br3t
    20 апр 2017 в 20:27
  • У меня есть одинаковые 3 новости с одинаковым id
    – Never3D
    20 апр 2017 в 20:27
  • Чтобы манипулировать элементами у них должны быть разные id
    – br3t
    20 апр 2017 в 20:28
  • ещё раз - ид уникальный должен быть. класс у всех новостей одинаковый и вы его используете для перебора, стилизации и т.д.
    – Alex
    20 апр 2017 в 20:30

2 ответа 2

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>

8
  • Uncaught SyntaxError: Unexpected token }
    – Never3D
    20 апр 2017 в 20:35
  • jsfiddle.net/n3r3hds1 не работает(
    – Never3D
    20 апр 2017 в 20:37
  • Что не работает?
    – user176262
    20 апр 2017 в 20:38
  • Есть текст <li>1~~2~~3</li> Как заменить ~~ на li и закрыть его же
    – Never3D
    20 апр 2017 в 20:39
  • <li>1</li> <li>2</li> <li>3</li> Вот так должно получиться заменить по сути ~~
    – Never3D
    20 апр 2017 в 20:39
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 ,просто если он нашел первое совпадение, то остальное игнорирует.

3
  • и это работает)
    – Never3D
    20 апр 2017 в 20:49
  • А как сделать, чтоб каждая заглавная буква шла с новой строчки?
    – Never3D
    20 апр 2017 в 21:15
  • @Never3D, уточните вопрос
    – user236701
    20 апр 2017 в 22:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.