☰

Извлечь заголовки флажков из нескольких блоков Div (Javascript)

tag-icon • tag-icon javascript greasemonkey
Извлечь заголовки флажков из нескольких блоков Div (Javascript)

Я пытаюсь написать скрипт Greasemonkey, который собирает уточненный список всех элементов, у которых есть галочка в флажке. Список флажков может меняться от недели к неделе и содержит сотни элементов. ИщуздесьЯ узнал, что это можно сделать, извлекая все элементы по имени класса:getElementsByClassName('class_name')

Однако мне не удаётся получить список элементов, не говоря уже о том, чтобы извлечь из него значения.

Вот упрощенная версия сайта.

<div class="grid_8 pt5 displayInlineTable">
  <div id="ListSelector" style="width:450px;float:left; padding-right:10px;">
    <div id="testDiv" style="border: solid 1px; overflow: auto; width: 450px;
        height: 200px; background-color: white" align="left">
      <div id="divLB" class="hstmls" style="width: 600px;">
        <input name="Name1" type="checkbox" id="ID1" checked="checked" title="Title1" value="Value1" onclick="tA('thing');">
        <label id="ID1_lf" for="ID1">Title1</label>
        <br>
        <input name="Name2" type="checkbox" id="ID2" checked="checked" title="Title2" value="Value2" onclick="tA('thing');">
        <label id="ID2_lf" for="ID2">Title2</label>
        <br>
        <input name="Name3" type="checkbox" id="ID3" title="Title3" value="Value3" onclick="tA('thing');">
        <label id="ID3_lf" for="ID3">Title3</label>
        <br>
      </div>
    </div>
  </div>
</div>

Я попытался поиграться с этим на JSFiddle (просто посмотрите отмеченные значения в окне оповещения), но мой код воспроизведения, похоже, ломает его.

var checkedValue = null;
var inputElements = document.getElementsByClassName('grid_8 pt5 displayInlineTable');
for (var i = 0; inputElements[i]; ++i) {
  if (inputElements[i].checked) {
    alert(inputElements[i].value);
  }

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

Есть ли способ определить, какие флажки есть на сайте (в этой конкретной таблице, так как есть много других таблиц) и перебрать их, извлекая только значения заголовков, когда это применимо?

решение1

Несколько вопросов:

  1. Возможно, это более по теме на Stack Overflow.
  2. Это не тот способ использования getElementsByClassName; он не выполняет несколько занятий одновременно.
  3. Для правильногоCSS-селекторы, вы хотитеquerySelectorAllДок.
  4. grid_8и pt5не являются надежными целями. Они, вероятно, будут часто меняться.
    Лучший CSS "путь" будет выглядеть примерно так:
    .querySelectorAll ('.displayInlineTable input:checked')(См. код ниже.)
  5. Возможно, ваша веб-страница загружает флажки динамически (через AJAX). Если это так, вам нужно использовать методы, поддерживающие AJAX, такие какwaitForKeyElements.

Так,для статической веб-страницы:

Такой код будет работать:

var chkdItems = document.querySelectorAll (".displayInlineTable input:checked");

console.log ("Checked Items:\n--------------");

chkdItems.forEach ( (chkBox, J) => {
    console.log (J, ": ", chkBox.value);
} );

Смживая демонстрация на jsFiddle.

Для динамической (AJAX) веб-страницы:

Полный скрипт Greasemonkey/Tampermonkey, например, такой, будет работать:

// ==UserScript==
// @name     _Simple Checkbox value demo
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements (".displayInlineTable input:checked", listChkbxValues);

function listChkbxValues (jNode) {
    if ( ! listChkbxValues.hdrPrinted) {
        listChkbxValues.hdrPrinted = true;
        console.log ( `
            Checked Items listed asynchronously, below:\n
            -------------------------------------------
        ` );
    }
    console.log ("Found value: ", jNode.val () );
}

Обратите внимание, что он также использует jQuery, что обычно является хорошей идеей.

Связанный контент