3

javascriptで子ノードの子ノードにアクセスするにはどうすればよいですか？各liの内側のimgをターゲットにして、その幅と高さを取得する必要があります。jqueryを使用せずにこれを実行したいと思います。純粋なJavaScript。

<ul id="imagesUL">
<li>
   <h3>title</h3>
   <img src="someURL" />
</li>
</ul>


var lis = document.getElementById("imagesUL").childNodes;
4

3 に答える 3

4

これを行う理想的な方法は、querySelectorAll関数が使用可能であることを保証できる場合（たとえば、モバイルブラウザー用のサイトを設計している場合）に関数を使用することです。

var imgs = document.querySelectorAll('#imagesUL li img');

ただし、それを保証できない場合は、自分でループを実行する必要があります。

var = lis = document.getElementById("imagesUL").childNodes,
      imgs = [],
      i, j;

for (i = 0; i < lis.length; i++) {
    for (j = 0; j < lis[i].childNodes.length; j++) {
        if (lis[i].childNodes[j].nodeName.toLowerCase() === 'img') {
            imgs.push(lis[i].childNodes[j]);
        }
    }
}

上記のコードスニペットは、jQueryなどのライブラリを使用して正気を保つための優れた引数です。

于 2013-03-19T18:38:47.033 に答える
1

これは私のために働きます：

var children = document.getElementById('imagesUL').children;
var grandChildren = [];
for (var i = 0; i < children.length; i++)
{
    var child = children[i];
    for (var c = 0; c < child.children.length; c++)
        grandChildren.push(child.children[c]);
}

grandChildrenすべての子供の子供が含まれています。

jQueryやUnderscoreJSのようなライブラリは、これをより宣言的な方法で記述しやすくします。

于 2013-03-19T18:38:20.893 に答える
0

関数に2番目のパラメーターを$()指定して、画像を検索するスコープを指定できます。

var lis = $('#imagesUL').children();
var images = $('img', lis)
images.each(function() {
    var width = $(this).attr('width');
    // ...
});
于 2013-03-19T18:31:33.640 に答える