同じクラス名のついた、子要素の数え方を回答いただければと思います。 1. li タグが 5つあるので、そのような出力にしたいのです。 2. 各 ul の li タグの数を出すには、どのようにすればよいのでしょうか ? どうぞ、皆様よろしくおねがいいたいします。 1 2 3 4 5 try { var chiledNodes = []; function userFunc( parent ) { chiledNodes = document.querySelector( parent ).children; alert ( chiledNodes.length ); } } catch( e ) { alert( e ); } userFunc( '.myClass' );

DOM の要素の数え方について

解決済

質問者：rynak_jp
質問日時：2013/12/02 11:54
回答数：2件

同じクラス名のついた、子要素の数え方を回答いただければと思います。
1. li タグが 5つあるので、そのような出力にしたいのです。
2. 各 ul の li タグの数を出すには、どのようにすればよいのでしょうか ?
どうぞ、皆様よろしくおねがいいたいします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>

<body>

<ul class="myClass">
<li>1</li>
<li>2</li>
</ul>

<ul class="myClass">
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<script>

try {

var chiledNodes = [];

function userFunc( parent ) {

chiledNodes = document.querySelector( parent ).children;

alert ( chiledNodes.length );

}

} catch( e ) {
alert( e );
}

userFunc( '.myClass' );
</script>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Ogre7077
回答日時：2013/12/02 13:48

UL要素の一覧を取り、個々にLI要素を勘定し、結果を配列とする簡単なやり方

var 結果 = [].map.call(
　document.querySelectorAll('ul.myClass'),
　function(ul){return ul.querySelectorAll('li').length}
);
// 質問の HTML を対象に実行すれば、結果 = [2, 3]

余談ではありますが、以下の関数は間違いやすいのでご注意ください
document.querySelector() - 該当する最初の一件だけをとる
document.querySelectorAll() - 該当する全てをとる