なんか上手くいえないけど、そういう感じのやつ。
どういうことか
こういうのがあったとする。
<ul>
<li><a href="" id="aaa"></a></li>
<li><a href="" id="bbb"></a></li>
<li><a href="" id="ccc"></a></li>
<li><a href="" id="ddd"></a></li>
</ul>
<ul>からすると<a>は孫要素にあたる。<ul>を基準にして、<a>のidをそれぞれ抽出してどうのこうのしていきたい場合、どうやるかという話。
やり方
.each()を使うことになる。
$(function(){
var $mago = $('ul').find('a');
$mago.each(function(){
console.log($(this).attr('id'));
})
})
consoleではこんな感じになる。
aaa
bbb
ccc
ddd
ダメな例
こうすると
$(function(){
var $mago = $('ul').find('a');
console.log($mago.attr('id'));
})
こうなる。
aaa
直接書き出すと先頭(ここでいうaaa)だけが表示される。そもそものところ.find()は複数あったら全部拾ってきてくれてるわけで、だから適切な記述をすれば全て書き出す事ができる。
別アプローチ
.find()じゃなくて.children()でも同様のことができる。
$(function(){
var $mago = $('ul').children().children('a');
$mago.each(function(){
console.log($(this).attr('id'));
})
})
考えなしにやるとただ長くなるだけで分かりづらさが勝つから、特定階層に絞るときとかそういうアレで使い分けをしたほうがいいですね。
コメント