QA@IT

jQueryで複数ある子要素の属性を変更

15227 PV
var len = ('#test li').length;
for (var i = 0; i < len; i++) {
    $('#test li').eq(i).children('input[type="text"]')[0].attr('name', 'ccc[' + i + ']');
    $('#test li').eq(i).children('input[type="text"]')[1].attr('name', 'ddd[' + i + ']');
}

上記のコードが動きません。
やりたいことは「id='test'のli要素内の各text要素の属性値を変更する」ということです。

HTMLは例えば以下のようになっています。

<li>
  <input type="text" name="aaa[1]"> 
  <input type="text" name="bbb[1]"> 
  <input type="button" value="Delete">
</li>   
<li>
  <input type="text" name="aaa[2]"> 
  <input type="text" name="bbb[2]"> 
  <input type="button" value="Delete">
</li>   

何が悪いのか、どうしたら実現するのか、ぜひ教えて頂きたいです。
宜しくお願い致します。

回答

var len = ('#test li').length;

$ が抜けています。

var len = $('#test li').length;

    $('#test li').eq(i).children('input[type="text"]')[0].attr('name', 'ccc[' + i + ']');
    $('#test li').eq(i).children('input[type="text"]')[1].attr('name', 'ddd[' + i + ']');

[0][1] ではなく eq(0)eq(1) です。

    $('#test li').eq(i).children('input[type="text"]').eq(0).attr('name', 'ccc[' + i + ']');
    $('#test li').eq(i).children('input[type="text"]').eq(1).attr('name', 'ddd[' + i + ']');

まとめると下記の通りです。

var len = $('#test li').length;
for (var i = 0; i < len; i++) {
    $('#test li').eq(i).children('input[type="text"]').eq(0).attr('name', 'ccc[' + i + ']');
    $('#test li').eq(i).children('input[type="text"]').eq(1).attr('name', 'ddd[' + i + ']');
}

ただ jQuery を使うなら for より each の方が良いと思います。

$('#test li').each(function(i){
    $(this).children('input[type="text"]').eq(0).attr('name', 'ccc[' + i + ']');
    $(this).children('input[type="text"]').eq(1).attr('name', 'ddd[' + i + ']');
});

さらに <input type="text"> なら :text セレクタにできます。

$('#test li').each(function(i){
    $(this).children('input:text').eq(0).attr('name', 'ccc[' + i + ']');
    $(this).children('input:text').eq(1).attr('name', 'ddd[' + i + ']');
});

eq(N) もセレクタにできます。

$('#test li').each(function(i){
    $(this).children('input:text:eq(0)').attr('name', 'ccc[' + i + ']');
    $(this).children('input:text:eq(1)').attr('name', 'ddd[' + i + ']');
});
編集 履歴 (2)
  • 回答ありがとうございます。
    非常に分かりやすく、より簡潔に書くことが出来ることが分かりました。
    ありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。