Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 17.05.2020, 18:12
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 184

Объясню задачу.
Есть список стран, страна \ столица. Названия страны и название ее столицы размещены в разных div.
Нужно вывести на console строну и ее столицу.

<div>
  <div class="1">
        <div class="2">
            <div class="3">
              <p>Россия</p>
            </div>
            <div class="4">
              <p>Москва </p>
             </div>
       </div>
   </div>
   <div class="1">
        <div class="2">
            <div class="3">
              <p>США</p>
            </div>
            <div class="4">
              <p>Вашингтон </p>
             </div>
       </div>
  </div>
   <div class="1">
        <div class="2">
            <div class="3">
              <p>Германия</p>
            </div>
            <div class="4">
              <p>Берлин </p>
             </div>
       </div>
  </div>
</div>
Ответить с цитированием
  #12 (permalink)  
Старый 17.05.2020, 19:03
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,007

Откуда такие странные имена классов?

Для вывода нужно получить коллекцию, а как кроме как обходом ее в цикле можно это сделать?
Ответить с цитированием
  #13 (permalink)  
Старый 17.05.2020, 19:45
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 184

Сообщение от laimas Посмотреть сообщение
Откуда такие странные имена классов?
Это просто пример))...

Сообщение от laimas Посмотреть сообщение

Для вывода нужно получить коллекцию, а как кроме как обходом ее в цикле можно это сделать?
Ну, коллекцию мы получим таким образом: var Countries = document.querySelectorAll(".countrie_capital");

А как правильно организовать цикл?


<div>
  <div class="countries_capitals">
        <div class="countrie_capital">
            <div class="country">
              <p>Россия</p>
            </div>
            <div class="capital">
              <p>Москва </p>
             </div>
       </div>
   </div>
   <div class="countrie_capital">
        <div class="name_capitals">
            <div class="country">
              <p>США</p>
            </div>
            <div class="capital">
              <p>Вашингтон </p>
             </div>
       </div>
  </div>
   <div class="countrie_capital">
        <div class="name_capitals">
            <div class="country">
              <p>Германия</p>
            </div>
            <div class="capital">
              <p>Берлин </p>
             </div>
       </div>
  </div>
</div>
Ответить с цитированием
  #14 (permalink)  
Старый 17.05.2020, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,578

DDim1000,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
<body>
<div>
  <div class="countries_capitals">
        <div class="countrie_capital">
            <div class="country">
              <p>Россия</p>
            </div>
            <div class="capital">
              <p>Москва </p>
             </div>
       </div>
   </div>
   <div class="countrie_capital">
        <div class="name_capitals">
            <div class="country">
              <p>США</p>
            </div>
            <div class="capital">
              <p>Вашингтон </p>
             </div>
       </div>
  </div>
   <div class="countrie_capital">
        <div class="name_capitals">
            <div class="country">
              <p>Германия</p>
            </div>
            <div class="capital">
              <p>Берлин </p>
             </div>
       </div>
  </div>
</div>
<script>
var Countries = document.querySelectorAll(".countrie_capital");
for(const el of Countries) {
const a = [...el.querySelectorAll(".country, .capital")].map(({textContent}) => textContent.trim());
document.write(`${a}<br>`)
}
</script>
</body>
</html>
Ответить с цитированием
  #15 (permalink)  
Старый 17.05.2020, 22:01
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 184

рони, спасибо большое!!!
Ответить с цитированием
  #16 (permalink)  
Старый 21.05.2020, 20:53
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 184

Доброе время суток!
Возник еще один вопрос:
Как получить содержимое элемента, при такой структуре кода? Нужно вывести страна\население.

<div class="content">
                              
                    <div class="grid-string ">
                        <div class="grid-item">5.</div>
                        <div class="grid-item"><span class="sp-icon" style="background-image: url('fi.png')"></span>Население России</div>
                        <div class="grid-item" style="width: 8%;">2</div>
                        <div class="grid-item" style="width: 8%; margin-right: 10px;"></div>
                        <div class="grid-item">
146 800 000 чел.</div>
                        <div class="grid-item off-ds"></div>
                    </div>
                    <div class="grid-string ">
                        <div class="grid-item">6.</div>
                        <div class="grid-item"><span class="sp-icon" style="background-image: url('am.png')"></span>Население США</div>
                        <div class="grid-item" style="width: 8%;">1</div>
                        <div class="grid-item" style="width: 8%; margin-right: 10px;"></div>
                        <div class="grid-item">328 915 700 чел.</div>
                        <div class="grid-item off-ds"></div>
                    </div>
                                  
</div>

Вот так, выводится только из первых контейнеров div:
var list_orders = document.querySelectorAll(".content > .grid-string ");
for (var i = 0; i < list_orders.length; i++) {
    country = list_orders[i].querySelector(".grid-item").textContent
      
       console.log(country);
    
}
Ответить с цитированием
  #17 (permalink)  
Старый 21.05.2020, 21:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,578

DDim1000,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .content {
        background-color: #5458CC;
    }

    </style>
</head>
<body>
<div class="content">

                    <div class="grid-string ">
                        <div class="grid-item">5.</div>
                        <div class="grid-item"><span class="sp-icon" style="background-image: url('fi.png')"></span>Население России</div>
                        <div class="grid-item" style="width: 8%;">2</div>
                        <div class="grid-item" style="width: 8%; margin-right: 10px;"></div>
                        <div class="grid-item">
146 800 000 чел.</div>
                        <div class="grid-item off-ds"></div>
                    </div>
                    <div class="grid-string ">
                        <div class="grid-item">6.</div>
                        <div class="grid-item"><span class="sp-icon" style="background-image: url('am.png')"></span>Население США</div>
                        <div class="grid-item" style="width: 8%;">1</div>
                        <div class="grid-item" style="width: 8%; margin-right: 10px;"></div>
                        <div class="grid-item">328 915 700 чел.</div>
                        <div class="grid-item off-ds"></div>
                    </div>

</div>
<script>
var list_orders = document.querySelectorAll(".content > .grid-string :nth-child(3n + 2):nth-child(-n + 5)");
for (var {textContent} of  list_orders) {
document.write(textContent+"<br>")
}
</script>
</body>
</html>

Последний раз редактировалось рони, 21.05.2020 в 21:30.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка app.use() requires a middleware function bortmehannik Node.JS 2 24.09.2019 15:40
Область видимости, создание переменных с помощью цикла Mikael86 Javascript под браузер 15 20.09.2019 01:11
Вызов функции Hol1killer Prototype & script.aculo.us 11 05.12.2016 00:37
Ошибка jQuery.widget is not a function borus jQuery 3 03.01.2016 10:44
переделать функцию adspro AJAX и COMET 5 09.03.2015 03:32