Объясню задачу.
Есть список стран, страна \ столица. Названия страны и название ее столицы размещены в разных 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>
|
Откуда такие странные имена классов?
Для вывода нужно получить коллекцию, а как кроме как обходом ее в цикле можно это сделать? |
Цитата:
Цитата:
А как правильно организовать цикл? <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>
|
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>
|
рони, спасибо большое!!!
|
Доброе время суток!
Возник еще один вопрос: Как получить содержимое элемента, при такой структуре кода? Нужно вывести страна\население. <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);
}
|
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>
|
| Часовой пояс GMT +3, время: 03:05. |