<div ="huga">
<li id="hoge1"></li>
<li id="hoge2"></li>
<li id="hoge3"></li>
</div>
という指定ができない環境にあり
<div ="huga">
<li></li>
<li></li>
<li></li>
</div>
このような状態の場合にjquery側で各liを指定することは可能でしょうか?
liの数は動的で、formにワードを打ち込むとliの中にその結果が生成されてきます。
indexを振って採番して、、、、というやり方ができるのかな?
もしくは別の方法があるのかな、、、と頭を悩ませているのですがご知見あるかたいらっしゃいましたらお願いいたします。
$(function(){
$("#huga li").live("click",function() {
var index = $("#huga li").index(this);
$(this).append(index + "番目");
});
});
ここまではindexで対応できているのですが、、、どうぞよろしくお願いいたします。
<html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script> $(function() { $('#btn').click(function() { $('#huga').append('<li></li>'); $('#huga li').each(function(i) { this.id = 'index' + i; }); }); }); </script> </head> <body> <div id="huga"> <li></li> <li></li> <li></li> </div> <button id="btn">li追加</button> </body> </html>
liを追加するところで毎回idを振り直すとか。
$(function() { $('#huga').bind('inserted', function() { $('#huga li').each(function(i) { this.id = 'index' + i; }); }); $('#btn').click(function() { $('#huga').append('<li></li>'); $('#huga').trigger('inserted'); }); });
trigger使ってイベントで通信するとか。(ただの関数呼び出しでいいか…)
<html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script> $(function() { $('#btn').click(function() { $('#huga').append('<li></li>'); $('#huga li').each(function(i) { this.id = 'index' + i; }); }); }); </script> </head> <body> <div id="huga"> <li></li> <li></li> <li></li> </div> <button id="btn">li追加</button> </body> </html>
liを追加するところで毎回idを振り直すとか。
$(function() { $('#huga').bind('inserted', function() { $('#huga li').each(function(i) { this.id = 'index' + i; }); }); $('#btn').click(function() { $('#huga').append('<li></li>'); $('#huga').trigger('inserted'); }); });
trigger使ってイベントで通信するとか。(ただの関数呼び出しでいいか…)
要するにeachのコールバックの第一引数でインデックスが取れます。
コレジャナイ場合はモデルケースを提示して下さい。
ありがとうございます。いただいた内容とは違う形ですが、ヒントになりまして実装することができました!
先に、何番目、というのが分かってる場合のやり方です。
例えば、二番目の <li> に対して onclick のハンドラを登録したいときには、以下のように書けます。
$('#huga li').eq(1).live("click", function() { ... });
ありがとうございます。何番目、というのがユーザー側で押した場所になります。
要するにeachのコールバックの第一引数でインデックスが取れます。
コレジャナイ場合はモデルケースを提示して下さい。
2011/10/30 13:39:26ありがとうございます。いただいた内容とは違う形ですが、ヒントになりまして実装することができました!
2011/10/31 11:05:27