Mit getElementById und getElementsByTagName zusammen

Ich habe code, der sieht so aus:

<ul id="effects-list" class="effects-list">
    <li data-creative="5">Creative</li>
</ul>

Ich bin versucht, die Daten zu Lesen-Attribut des HTML-mit dem folgenden code:

var effectData = document.getElementById("effects-list").getElementsByTagName("li");
var creative = effectData.getAttribute('data-creative');
alert(creative)

Der obige code funktioniert nicht. Es wirft die folgende Fehlermeldung:

effectData.getAttribute is not a function

Bin ich mit Hilfe von jQuery auf die Seite, und ursprünglich der dies versuchte:

var effectData = $('.effects-list li');

Wieder die gleiche Fehlermeldung.

Was mache ich falsch und wie behebe ich dieses Problem?

Hier ist ein jsFiddle der code.

Hinweis: Es gibt mehr li Elemente auf der Seite und ich bin Lesen mehr Daten als nur eine li element. Ich versuche zu vermeiden, dass ad eine separate id zu jedem li element, wenn ich helfen kann.

getElementsByTagName() gibt eine collection zurück, nicht ein einziges Element. Hinweis: der plural getElements... vs. singular getElementById(). Sie benötigen Zugriff auf einen index: ...ByTagName("li")[0];
Haben Sie versucht, $("#Effekte-Liste").find("li").attr("data-kreativ") ?
verwenden var creative = effectData[0].getAttribute('data-creative'); als effectData ist ein array
Wenn ich mehr als eine li - element-Methode gibt null für das zweite element.
siehe jsfiddle.net/arunpjohny/PH7L7/1

InformationsquelleAutor L84 | 2014-05-14

  1. 4

    getElementsByTagName() gibt eine Liste der Elemente mit dem angegebenen tag-Namen, also müssen Sie Zugriff auf das element in dieser Liste mit []:

    var effectData = document.getElementById("effects-list").getElementsByTagName("li")[0];

    Aktualisiert Fiddle

    Wenn Sie auf der Suche für die jQuery-Lösung verwenden, können Sie .Daten():

    var creative = $('#effects-list').find('li').data('creative');

    Aktualisiert Fiddle

    InformationsquelleAutor Felix

  2. 1

    Versuchen Sie folgenden code

    var dataCreative = $("#effects-list li").attr('data-creative');
alert(dataCreative);

    Dieser arbeitet JSFiddle.

    Und wenn es mehrere li innen ul dann können Sie .each siehe unten code

    $("#effects-list li").each(function(){
    var dataCreative = $(this).attr('data-creative');
    alert(dataCreative);
});

    InformationsquelleAutor Bhushan Kawadkar

Schreibe einen Kommentar