Как запихнуть document.querySelector в другой document.querySelector?

Question

С помощью var k = document.querySelector("#gamelist_rows").lastElementChild.id нахожу id последней игры (Тут получается id = 3). ID постоянно меняется, то есть было 3, через 15 секунд стало 4 и т.д. Вопрос как в первый selector запихнуть второй selector(Вот получил я id, далее я хочу использовать этот id для пути ( document.querySelector("Сам ID(k) > #row6_idx > span" и уже в консоли получить Текст из spana(Вы выиграли))?

<div class="table_cont" id="gamelist_rows">
  <ul id="orl_game_1">
    <ul id="orl_game_2">
      <ul id="orl_game_3">
        <input type="hidden" id="game_id_hidden" value="3" alt="1">
        <input type="hidden" id="game_md5_hidden" value="3b4078790e214afb4caf791db8be42e1">
        <input type="hidden" id="game_md5_source" value="-доступно после игры!-">
        <input type="hidden" class="xhash" value="4e240">
        <li class="rows1" style="opacity: 0.2;">
          <a href="" target="_blank" style="color:#0077BB;"></a>
        </li>
        <li class="rows3 bold" style="opacity: 0.2;">0.1</li>
        <li class="rows4" style="opacity: 0.2;">12:40</li>
        <li class="rows4" style="opacity: 0.2;">
          <center>
            <a href="#" onclick="return game_md5_dialog(3);">
              <span class="protect_md5" title="Контроль невмешательства MD5"></span></a>
          </center>
        </li>
        <li class="rows5" style="opacity: 0.2;">
          <div class="hand_type type_123">
            <label class="h_gold_0 "><input name="hands" type="radio" checked="" value="1"></label>
            <label class="h_gold_1 "><input name="hands" type="radio" checked="" value="2"></label>
            <label class="h_random  current"><input name="hands" type="radio" checked="checked" value="4"></label>
          </div>
        </li>
        <li class="rows6" id="row6_idx"><span class="prn_win" title="Вы выиграли">Вы выиграли </span></li>
      </ul>
</div>

Answer 1

ID - это уникальный идентификатор. Так как:

#row6_idx постоянный

то сразу от него отталкивайтесь:

console.log(document.querySelector('#row6_idx > span').innerText)

<div class="table_cont" id="gamelist_rows">
  <ul id="orl_game_1"></ul>
  <ul id="orl_game_2"></ul>
  <ul id="orl_game_3">
    <input type="hidden" id="game_id_hidden" value="3" alt="1">
    <input type="hidden" id="game_md5_hidden" value="3b4078790e214afb4caf791db8be42e1">
    <input type="hidden" id="game_md5_source" value="-доступно после игры!-">
    <input type="hidden" class="xhash" value="4e240">
    <li class="rows1" style="opacity: 0.2;">
      <a href="" target="_blank" style="color:#0077BB;"></a>
    </li>
    <li class="rows3 bold" style="opacity: 0.2;">0.1</li>
    <li class="rows4" style="opacity: 0.2;">12:40</li>
    <li class="rows4" style="opacity: 0.2;">
      <center>
        <a href="#" onclick="return game_md5_dialog(3);">
          <span class="protect_md5" title="Контроль невмешательства MD5"></span></a>
      </center>
    </li>
    <li class="rows5" style="opacity: 0.2;">
      <div class="hand_type type_123">
        <label class="h_gold_0 "><input name="hands" type="radio" checked="" value="1"></label>
        <label class="h_gold_1 "><input name="hands" type="radio" checked="" value="2"></label>
        <label class="h_random  current"><input name="hands" type="radio" checked="checked" value="4"></label>
      </div>
    </li>
    <li class="rows6" id="row6_idx"><span class="prn_win" title="Вы выиграли">Вы выиграли </span></li>
  </ul>
</div>

Answer 2

Во-первых, используя Ваш код, получается id = 'orl_game_1', а не 3. Закройте теги в самом начале.

По вопросу: используйте массивы и циклы.

<div class="table_cont" id="gamelist_rows">
  <ul id="orl_game_1"></ul>
  <ul id="orl_game_2"></ul>
  <ul id="orl_game_3">
    <input type="hidden" id="game_id_hidden" value="3" alt="1">
    <input type="hidden" id="game_md5_hidden" value="3b4078790e214afb4caf791db8be42e1">
    <input type="hidden" id="game_md5_source" value="-доступно после игры!-">
    <input type="hidden" class="xhash" value="4e240">
    <li class="rows1" style="opacity: 0.2;"><a href="" target="_blank" style="color:#0077BB;"></a></li>
    <li class="rows3 bold" style="opacity: 0.2;">0.1</li>
    <li class="rows4" style="opacity: 0.2;">12:40</li>
    <li class="rows4" style="opacity: 0.2;"><center><a href="#" onclick="return game_md5_dialog(3);">
    <span class="protect_md5" title="Контроль невмешательства MD5"></span></a></center></li>
    <li class="rows5" style="opacity: 0.2;">
      <div class="hand_type type_123">
        <label class="h_gold_0 "><input name="hands" type="radio" checked="" value="1"></label>
        <label class="h_gold_1 "><input name="hands" type="radio" checked="" value="2"></label>
        <label class="h_random  current"><input name="hands" type="radio" checked="checked" value="4"></label>
      </div>
    </li>
    <li class="rows6" id="row6_idx"><span class="prn_win" title="Вы выиграли">Вы выиграли </span></li>
  </ul>
</div>


<script>
  var k = Array.from(document.querySelector("#gamelist_rows").children);
  let lastElementId = k[k.length - 1].id; // Получаем id последнего элемента

  let winText1 = document.querySelector(`#${lastElementId} > #row6_idx > span`).textContent; // Вариант с интерполяцией ES6
  let winText2 = document.querySelector('#' + lastElementId + ' > #row6_idx > span').textContent; // Вариант с конкатенацией

  console.log(winText1);
  console.log(winText2);
</script>

Оба варианта будут выводить текст из span в последнем дочернем элементе.

БЛОГ НА HUSL

Как запихнуть document.querySelector в другой document.querySelector?

Ответы (2 шт):