Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 17.05.2020, 18:39   #1
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
Счастье Как получить содержимое элемента?

Здравствуйте!

Объясню задачу.
Есть список стран, страна \ столица. Названия страны и название ее столицы размещены в разных 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>
Женя32 вне форума Ответить с цитированием
Старый 18.05.2020, 14:17   #2
Berners-Lee
Пользователь
 
Регистрация: 18.05.2020
Сообщений: 21
По умолчанию

Здравствуйте. Позволил себе немного изменить код и сделал так:
Код:
<div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Россия</p>
      </div>
      <div class="a4">
        <p>Москва </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>США</p>
      </div>
      <div class="a4">
        <p>Вашингтон </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Германия</p>
      </div>
      <div class="a4">
        <p>Берлин </p>
      </div>
    </div>
  </div>
</div>
<script>
const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3").textContent,
  div.querySelector(".a4").textContent
]);
console.log(data);
</script>

Последний раз редактировалось Berners-Lee; 18.05.2020 в 14:46. Причина: Убрал кое-что лишнее.
Berners-Lee вне форума Ответить с цитированием
Старый 18.05.2020, 18:22   #3
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
По умолчанию

Цитата:
Сообщение от Berners-Lee Посмотреть сообщение
Здравствуйте. Позволил себе немного изменить код и сделал так:
Код:
<div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Россия</p>
      </div>
      <div class="a4">
        <p>Москва </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>США</p>
      </div>
      <div class="a4">
        <p>Вашингтон </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Германия</p>
      </div>
      <div class="a4">
        <p>Берлин </p>
      </div>
    </div>
  </div>
</div>
<script>
const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3").textContent,
  div.querySelector(".a4").textContent
]);
console.log(data);
</script>
Спасибо большое! Все так, как и хотел.
НО, есть один вопрос:
Я делаю вывод данных вот таким образом:
Код:
 var a=[data];  
      tour = a.toString().replace(/([^,]+),([^,]+)(,|$)/g,'$1 = $2');
      
          console.log(tour);
и почему-то каждое второе значение выводится не в строку, например:
Россия =
Москва.

Как сделать, чтоб вывод был в одну строку?:
Россия = Москва.
Женя32 вне форума Ответить с цитированием
Старый 18.05.2020, 19:25   #4
Berners-Lee
Пользователь
 
Регистрация: 18.05.2020
Сообщений: 21
По умолчанию

Не ожидал такого эффекта, значит следует сделать так:
Код:
const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3 p").textContent,
  div.querySelector(".a4 p").textContent
]);
//console.log(data.toString().replace(/([^,]+),([^,]+)(,|$)/g,'$1 = $2'));
Тогда получим вывод в одну строку.
Berners-Lee вне форума Ответить с цитированием
Старый 18.05.2020, 21:43   #5
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
По умолчанию

Цитата:
Сообщение от Berners-Lee Посмотреть сообщение
Не ожидал такого эффекта, значит следует сделать так:
Код:
const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3 p").textContent,
  div.querySelector(".a4 p").textContent
]);
//console.log(data.toString().replace(/([^,]+),([^,]+)(,|$)/g,'$1 = $2'));
Тогда получим вывод в одну строку.
Нет, тоже самое выходит, переносит на новою строку...... Вот, посмотрите сами результат: https://jsfiddle.net/qfet2z6j/2/
Выходит вот так:
Россия
=
Москва

США
=
Вашингтон

Германия
=
Берлин

Последний раз редактировалось Женя32; 18.05.2020 в 21:45.
Женя32 вне форума Ответить с цитированием
Старый 18.05.2020, 22:03   #6
BDA
МегаМодератор
СуперМодератор
 
Аватар для BDA
 
Регистрация: 09.11.2010
Сообщений: 7,285
По умолчанию

Код:
const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3 p").textContent,
  div.querySelector(".a4 p").textContent
].join(" = "));
console.log(data.join("\n"));
Пишите язык программирования - это форум программистов, а не экстрасенсов. (<= это подпись )

Последний раз редактировалось BDA; 18.05.2020 в 22:06.
BDA вне форума Ответить с цитированием
Старый 18.05.2020, 23:35   #7
Berners-Lee
Пользователь
 
Регистрация: 18.05.2020
Сообщений: 21
По умолчанию

Женя32, Вам совершенно правильно BDA подсказывает, так и надо. Что касается моего ответа, то обратите внимание, что на jsfiddle Вы сейчас тестируете код из моего первого поста, где я получил text-content всего блока, в который вложен абзац текста. А в посте #4 я уже исправился.
Berners-Lee вне форума Ответить с цитированием
Старый 19.05.2020, 09:53   #8
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
По умолчанию

Цитата:
Сообщение от Berners-Lee Посмотреть сообщение
Женя32, Вам совершенно правильно BDA подсказывает, так и надо. ...
Да, все выводится..., но, почему все с новой строки?
Россия
=
Москва

США
=
Вашингтон

Германия
=
Берлин

Почему не в строчку выводится:
Россия = Москва..
С новой строки нужно чтоб выводились данные с другого блока a2. Вот так нужно:
Россия = Москва.
США = Вашингтон.
Германия = Берлин.

Код:
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Россия</p>
      </div>
      <div class="a4">
        <p>Москва </p>
      </div>
    </div>
  </div>
Вот, можете сами посмотреть:https://jsfiddle.net/qfet2z6j/2/

Последний раз редактировалось Женя32; 19.05.2020 в 09:57.
Женя32 вне форума Ответить с цитированием
Старый 19.05.2020, 12:38   #9
Berners-Lee
Пользователь
 
Регистрация: 18.05.2020
Сообщений: 21
По умолчанию

Женя32, Вы неточно скопировали код: текстовое содержимое следует доставать из абзацев, тогда оно не будет содержать переноса строки.

Вот: https://codepen.io/Berners-Lee/pen/GRpwLyj?editors=1011.

// Кстати, консоль — это вспомогательный инструмент, пользователь вряд ли будет туда заглядывать; но если есть такая задача — почему нет.
Berners-Lee вне форума Ответить с цитированием
Старый 19.05.2020, 16:37   #10
Женя32
Форумчанин
 
Регистрация: 12.09.2008
Сообщений: 621
Счастье

Подскажите, пожалуйста, как в таком варианте получить содержимое элемента?:
Код:
const listtr = document.querySelectorAll(".a1");
    for (var i = 0; i < listtr.length; i++) {
         infotr = listtr[i].querySelectorAll(".a2");  
                    
        for (var l = 0; l < infotr.length; l++) {
              titletr = infotr[l].querySelectorAll(".a4");
             
          
             console.log(titletr.length); 
         }
    }

Последний раз редактировалось Женя32; 19.05.2020 в 16:40.
Женя32 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
получить содержимое html brownb Общие вопросы Delphi 4 01.11.2018 16:43
Вытащить содержимое родительского элемента Predator199 JavaScript, Ajax 5 16.06.2014 12:47
получить содержимое URL Le0n4iko_o Общие вопросы Delphi 26 09.11.2013 08:20
Динамически изменить содержимое элемента ACE Valery JavaScript, Ajax 6 06.09.2010 17:40
Как получить содержимое веб страницы? SuperOrange Общие вопросы по Java, Java SE, Kotlin 0 05.07.2009 10:39