jquery - どの子が選択されたかを取得する方法

Question

その特定の行の背景色を変更できるように、どの子がクリックされたかを知る必要があります。

<script>
         var counter = 0;
         $(document).ready(function(){
            $(".eastern > ul").click(function(){
                counter++;
                $(".northern > ul").append("<li>Champlain " + counter.toString() + "</li>");
            });
            $(".northern > ul").click(function(){
                $(".northern > ul").children(':nth-child(n)').css("background-color","blue");
            });
        });
    </script>

Answer 1

event関数に渡してから使用します

$(event.target).addClass("yourClass");

使用するデモul: http://jsfiddle.net/WS7VK/

Answer 2

の値はthis、イベント ハンドラー内でイベントを発生させたオブジェクトになります (スクリプトに追加されたコメントを参照してください)。

<script>
     var counter = 0;
     $(document).ready(function(){
        $(".eastern > ul").click(function(){
            // the this pointer here contains the object that was clicked on
            counter++;
            $(".northern > ul").append("<li>Champlain " + counter.toString() + "</li>");
        });
        $(".northern > ul").click(function(){
            // the this pointer here contains the object that was clicked on
            $(".northern > ul").children(':nth-child(n)').css("background-color","blue");
        });
    });
</script>

したがって、クリックした子オブジェクトのみの色を変更したい場合は、次のようにすることができます。

<script>
     var counter = 0;
     $(document).ready(function(){
        $(".eastern > ul").click(function(){
            // the this pointer here contains the object that was clicked on
            counter++;
            $(".northern > ul").append("<li>Champlain " + counter.toString() + "</li>");
        });
        $(".northern > ul").click(function(){
            // set color of children of the clicked-on object
            $(this).children().css("background-color","blue");
        });
    });
</script>