獲取子屬性

我有這樣的HTML代碼中多次一前一後：獲取子屬性

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

，我試圖讓一個變量img標籤的src屬性中的路徑值，也是在另一個變量的範圍內的文本。

我嘗試這樣的代碼，但它不工作：

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

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

的clickedLi變量僅通過包含所有文檔中的標籤li陣列循環的變量。

因此，這是一個完整的JavaScript代碼，我有：

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 + '">' 

    } 
}

來源

2012-04-11 m_vdbeek

也許嘗試jQuery很容易。 – 2012-04-11 15:20:53

您可能需要'imgTitle.html（）'，而不是'.data'。 – 2012-04-11 15:21:23

我不希望爲此使用jQuery。只是個人喜好。 – 2012-04-11 15:22:24

使用.firstElementChild和.lastElementChild避免空白文本節點。

如果您支持舊版瀏覽器，則需要使用填充程序。

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 + '">'; 
};

來源

2012-04-11 15:21:11

非常感謝我將測試代碼！ = D – 2012-04-11 15:32:05

@AwakeZoldiek：我犯了錯誤。我重用了一個我不應該擁有的變量。固定。它可以在現代瀏覽器中使用，但不適用於舊版瀏覽器。 – 2012-04-11 15:41:05

好吧，所以我測試了第二個代碼，無論出於什麼原因，它都不起作用，可能是我在其餘代碼中犯的一個錯誤。我編輯了我的第一篇文章，並添加了其餘的JavaScript，其中我使用了這兩個變量。 – 2012-04-11 15:46:42

下面的代碼你想要做什麼：

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

來源

2012-04-11 15:28:36 Tom

坦克你的答案也將測試你的代碼。 – 2012-04-11 15:32:27

爲什麼如此複雜，你可以使用'getElementsByTagName（）'在點擊'li'標籤上而不是自己走孩子節點？ – jfriend00 2012-04-11 15:41:05

我真的不明白你的意思嗎？ – 2012-04-11 15:44:52

有了這個HTML：

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

你可以這樣說：

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

這裏工作演示：http://jsfiddle.net/jfriend00/ju9uZ/

文件被加載後，您運行這段代碼。最簡單的方法是將此代碼放在</body>標記之前，或者內嵌或包含在.js文件中。

來源

2012-04-11 15:30:48 jfriend00

回答

相關問題