Holen child-Attribut

Habe ich diesen HTML-code mehrere Male eins nach dem anderen:

<li>
   <img src="path/to/my/picture.jpg" alt="my picture" />
   <span>picture title</span>
</li>

und ich bin versucht zu bekommen den Weg Wert innerhalb der src Attribut des img tag in eine variable, und auch der text in den span in einer anderen variable.

Ich versuchte diesen code, aber es funktioniert nicht:

clickedLi.onclick = function() {
    var imgPath = clickedLi.firstChild;
    var pathLi = imgPath.getAttribute("src");

    var imgTitle = clickedLi.lastChild;
    var titleLi = imgTitle.data;

Den clickedLi variable nur eine variable, die in einer Schleife durch ein array mit allen li - tags im Dokument.

Also das ist der komplette JavaScript-code habe ich :

var myLis = document.getElementsByTagName('li');
var liCnt = myLis.length; 
for(var i = 0; i < liCnt; i++) {
    var currentLi = myLis[i];
    currentLi.onclick = function() {                

        var imgPath = firstElementChild(this);
        var pathLi = imgPath.getAttribute("src");

        var imgTitle = lastElementChild(this);
        var titleLi = imgTitle.firstChild.data;

        var myImgDiv = document.getElementById("test");
        myImgDiv.innerHTML = '<h2>' + titleLi + '</h2>';
        myImgDiv.innerHTML = '<img src="' + pathLi + '" alt="' + titleLi + '">' 

    }
}

Vielleicht versuchen jQuery ist einfach.
Würden Sie wahrscheinlich wollen imgTitle.html(), nicht .data.
Ich bevorzuge nicht die Verwendung von jQuery für diese. Nur persönliche Präferenz.

InformationsquelleAutor m_vdbeek | 2012-04-11

2

Verwenden .firstElementChild und .lastElementChild zu vermeiden, die whitespace-Textknoten.

Benötigen Sie ein shim, wenn Sie die Unterstützung von älteren Browsern.
```
function firstElementChild(el) {
    var child = el.firstElementChild;
    if (!child) {
        child = el.firstChild;
        while (child && child.nodeType !== 1)
            child = child.nextSibling;
    }
    return child;
}

function lastElementChild(el) {
    var child = el.lastElementChild;
    if (!child) {
        child = el.lastChild;
        while (child && child.nodeType !== 1)
            child = child.previousSibling;
    }
    return child;
}
```
```
clickedLi.onclick = function() {
    var imgPath = firstElementChild(this); //<-- use "this", not "clickedLi"
    var pathLi = imgPath.getAttribute("src");

    var imgTitle = lastElementChild(this); //<-- use "this", not "clickedLi"
    var titleLi = imgTitle.firstChild.data;

    var myImgDiv = document.getElementById("test");

      //Concatenate the strings to do a single assignment to .innerHTML
    myImgDiv.innerHTML = '<h2>' + titleLi + '</h2>' +
                         '<img src="' + pathLi + '" alt="' + titleLi + '">';
};
```
- Vielen Dank ich werde den code testen ! =D
- Ich Fehler gemacht. Ich wiederverwendet, eine variable, die ich nicht haben sollte. Behoben. Es hätte funktioniert in modernen Browsern, aber nicht im alten.
- Ok, also getestet habe ich den zweiten code ein, für welchen Grund es hat nicht funktioniert, wahrscheinlich ein Fehler, den ich in meinem restlichen code. Ich bearbeitete meinen ersten post einen Hinzugefügt, der rest des JavaScript, die ich habe, wo ich die beiden Variablen.
- Ist, dass der aktualisierte code befindet sich im gleichen onclick handler? Und Wann werden Sie ausgeführt, die Schleife, wählt die li Elemente? Haben Sie überprüft, dass Sie richtig ausgewählt?
- ja, es ist nur nach der var titleLi Teil. Ich habe das komplette javascript-code. Aber normalerweise sollte es funktionieren. Getestet habe ich den li-Auswahl vor.
- Haben Sie this statt clickedLi im inneren der hf? Die einzige Möglichkeit, die Sie nutzen könnten clickedLi im hf wäre es, wenn Sie aufgerufen wird, eine Funktion zum schließen über diese variable.
- Nein, nie, neben den beiden Linien, die Sie vorgeschlagen, die in Ihrer ursprünglichen Antwort.
- Es gibt eine weitere Ausgabe mit den aktualisierten code. Sie haben dmyImgDiv statt myImgDiv für die zweite .innerHTML, aber auch die zweite .innerHTML Zuweisung überschreibt den ersten. Sollten Sie nur tun, eine Zuordnung mit Hilfe einer einzigen HTML-string. Hier ist eine demo: jsfiddle.net/xmScZ ich update meine Antwort mit dem vollständigen code.
InformationsquelleAutor

code unten tut, was Sie wollen:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var lis = document.getElementsByTagName("li");
                    for(var i = 0, ceiling = lis.length; i < ceiling; i++) {
                        lis[i].onclick = function() {
                            var childNodes = this.childNodes;
                            for(var j = 0, ceiling2 = childNodes.length; j < ceiling2; j++) {
                                if(childNodes[j].nodeType == 1) {
                                    if(childNodes[j].nodeName == "IMG") {
                                        alert(childNodes[j].src);
                                    } else if(childNodes[j].nodeName == "SPAN"){
                                        alert(childNodes[j].innerHTML);
                                    }
                                }
                            }
                        }
                    }
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <ul>
            <li>
                <img src="path/to/my/picture1.jpg" alt="my picture" /> <span>picture title1</span>
            </li>
            <li>
                <img src="path/to/my/picture2.jpg" alt="my picture" /> <span>picture title2</span>
            </li>
        </ul>
    </body>
</html>

Tank Sie für Ihre Antwort den code testen zu.
Warum so kompliziert, wenn könnten Sie getElementsByTagName() auf die click-on li tag, anstatt zu Fuß die Kind-Knoten selbst?
Ich weiß nicht wirklich verstehen, was du meinst ?
Ich weiß, Sie tun können, es einfacher, aber hey es funktioniert...ich möchte wollte ein Beispiel geben, wie es getan werden kann.

InformationsquelleAutor Tom

Mit diesem HTML-Code:

<ul id="mylist">
    <li>
       <img src="path/to/my/picture1.jpg" alt="my picture" />
       <span>picture title 1</span>
    </li>
    <li>
       <img src="path/to/my/picture2.jpg" alt="my picture" />
       <span>picture title 2</span>
    </li>
    <li>
       <img src="path/to/my/picture3.jpg" alt="my picture" />
       <span>picture title 3</span>
    </li>
</ul>

Kannst du es so machen:

var listItems = document.getElementById("mylist").getElementsByTagName("li");
for (var i = 0, len = listItems.length; i < len; i++) {
    listItems[i].onclick = function() {
        var spanObj = this.getElementsByTagName("span")[0]; 
        var spanText = spanObj.textContent || spanObj.innerText;
        var imgSrc = this.getElementsByTagName("img")[0].src;
        //now you have imgSrc and spanText here to do with as you please
    };
}

Arbeiten demo hier: http://jsfiddle.net/jfriend00/ju9uZ/

Sie diesen code ausführen, nachdem das Dokument geladen ist. Der einfachste Weg das zu tun ist, setzen Sie diesen code direkt vor der </body> tag, entweder inline oder in einem enthalten .js-Datei.

InformationsquelleAutor jfriend00

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.