jqueryでliの指定方法について質問させていただきます。

<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で対応できているのですが、、、どうぞよろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/30 12:29:31
  • 終了:2011/10/31 11:06:26

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/10/30 12:59:14

ポイント80pt
<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使ってイベントで通信するとか。(ただの関数呼び出しでいいか…)



関連:jQuery.each(object, callback) - jQuery 日本語リファレンス

id:Cherenkov

要するにeachのコールバックの第一引数でインデックスが取れます。

コレジャナイ場合はモデルケースを提示して下さい。

2011/10/30 13:39:26
id:kuso47

ありがとうございます。いただいた内容とは違う形ですが、ヒントになりまして実装することができました!

2011/10/31 11:05:27

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/10/30 12:59:14ここでベストアンサー

ポイント80pt
<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使ってイベントで通信するとか。(ただの関数呼び出しでいいか…)



関連:jQuery.each(object, callback) - jQuery 日本語リファレンス

id:Cherenkov

要するにeachのコールバックの第一引数でインデックスが取れます。

コレジャナイ場合はモデルケースを提示して下さい。

2011/10/30 13:39:26
id:kuso47

ありがとうございます。いただいた内容とは違う形ですが、ヒントになりまして実装することができました!

2011/10/31 11:05:27
id:a-kuma3 No.2

a-kuma3回答回数4365ベストアンサー獲得回数18012011/10/30 16:55:11

ポイント20pt

先に、何番目、というのが分かってる場合のやり方です。

例えば、二番目の <li> に対して onclick のハンドラを登録したいときには、以下のように書けます。

$('#huga li').eq(1).live("click", function() {
    ...
});

eq(index) - jQuery 日本語リファレンス

id:kuso47

ありがとうございます。何番目、というのがユーザー側で押した場所になります。

2011/10/31 11:06:12

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません