Форум

DDim1000 · #11 (**permalink**) 17.05.2020, 18:12

Объясню задачу.
Есть список стран, страна \ столица. Названия страны и название ее столицы размещены в разных 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>

laimas · #12 (**permalink**) 17.05.2020, 19:03

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

Для вывода нужно получить коллекцию, а как кроме как обходом ее в цикле можно это сделать?

DDim1000 · #13 (**permalink**) 17.05.2020, 19:45

Сообщение от 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

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>

DDim1000 · #15 (**permalink**) 17.05.2020, 22:01

рони, спасибо большое!!!

DDim1000 · #16 (**permalink**) 21.05.2020, 20:53

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

<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

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>

Форум

Справочник

Discord чат

Курсы javascript