[jQuery] クリックされた子要素を取得する

投稿日：2017年7月22日更新日：2018年4月28日

リストでクリックされた子要素を取得するサンプルです。

サンプルソース

例）リストでクリックされた要素を取得する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $("#list1 li").on("click", function(){
    var a = $("#list1 li").index(this);
    alert("クリックしたのは、" + (a+1) + "行目です");
  });
});
</script>
</head>
<body>
  <ul id="list1">
    <li>１つめ</li>
    <li>２つめ</li>
    <li>３つめ</li>
    <li>４つめ</li>
    <li>５つめ</li>
  </ul>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$("#list1 li").on("click", function(){

var a = $("#list1 li").index(this);

alert("クリックしたのは、" + (a+1) + "行目です");

});

</script>

</head>

<body>

</ul>

</body>

</html>

実行例

要素をクリックすると、クリックした要素の行数が表示されます。

１つめ
２つめ
３つめ
４つめ
５つめ

解説

li要素に.onメソッドでクリックイベントを設定して、要素をthisで取得すればOKです。

執筆者：とら