[jQuery]複数ある孫要素の内容を一括で取得してそれぞれ書き出す方法

なんか上手くいえないけど、そういう感じのやつ。

どういうことか

こういうのがあったとする。

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

考えなしにやるとただ長くなるだけで分かりづらさが勝つから、特定階層に絞るときとかそういうアレで使い分けをしたほうがいいですね。

コメント

タイトルとURLをコピーしました