☰

Kontrollkästchentitel innerhalb mehrerer Divs extrahieren (Javascript)

tag-icon • tag-icon javascript greasemonkey
Kontrollkästchentitel innerhalb mehrerer Divs extrahieren (Javascript)

Ich versuche, ein Greasemonkey-Skript zu schreiben, das eine verfeinerte Liste aller Elemente zusammenstellt, deren Kontrollkästchen aktiviert sind. Die Liste der Kontrollkästchen kann von Woche zu Woche variieren und Hunderte von Elementen enthalten.HierIch habe gelernt, dass dies erreicht werden kann, indem alle Elemente nach Klassennamen abgerufen werden:getElementsByClassName('class_name')

Allerdings gelingt es mir nicht, die Liste der Elemente abzurufen, geschweige denn, die Werte daraus zu erfassen.

Hier ist eine vereinfachte Version der Site.

<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>

Ich habe versucht, damit auf JSFiddle zu spielen (sehen Sie sich einfach die geprüften Werte im Warnfeld an), aber mein Spielcode scheint es zu beschädigen.

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);
  }

Letztendlich plane ich, jedes markierte Element zu nehmen und seinen Titel in ein Textfeld an der Seite zu schreiben, jeweils getrennt durch Zeilenumbrüche.

Gibt es eine Möglichkeit, zu ermitteln, welche Kontrollkästchen sich auf der Site befinden (innerhalb dieser bestimmten Tabelle, da es auch viele andere Tabellen gibt), diese zu durchlaufen und dabei gegebenenfalls nur die Titelwerte abzurufen?

Antwort1

Mehrere Probleme:

  1. Dies ist bei Stack Overflow möglicherweise eher ein Thema.
  2. So verwendet man es nicht getElementsByClassName; es führt nicht mehrere Klassen gleichzeitig aus.
  3. Für die ordnungsgemäßeCSS-Selektoren, Sie wollenquerySelectorAllDokument.
  4. grid_8und pt5sind keine robusten Ziele. Sie ändern sich wahrscheinlich häufig.
    Ein besserer CSS-„Pfad“ wäre etwa:
    .querySelectorAll ('.displayInlineTable input:checked')(Siehe den Code unten.)
  5. Es kann sein, dass Ihre Webseite die Kontrollkästchen dynamisch lädt (über AJAX). Wenn das der Fall ist, müssen Sie AJAX-fähige Methoden verwenden, wie zum BeispielwarteAufSchlüsselelemente.

Also,für eine statische Webseite:

Code wie dieser funktioniert:

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

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

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

Ein ... sehenLive-Demo bei jsFiddle.

Für eine dynamische (AJAX) Webseite:

Ein vollständiges Greasemonkey/Tampermonkey-Skript wie das folgende funktioniert:

// ==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 () );
}

Beachten Sie, dass es auch jQuery nutzt, was normalerweise eine gute Idee ist.

verwandte Informationen