javascript - JQuery は、他のすべての子要素の z-index をリセットします

Question

以下に示すように、動的に作成された要素をクリックすると、他の要素の上に表示されるようにしようとしています。

$("#clicks").on('click', '[id^=pin]', function (e) {
            for ($i = 0; $i <= $("#clicks").children('.pin').length;$i++){
                if ('pin' + $i == this.id) {
                    $(this).css({ 'z-index': '9999' });
                } else {
                    //How to set reset the z-index of other elements?
                }
            }
        })

Answer 1

のデフォルト値はですz-indexがauto、コードを大幅に単純化してループを削除できます。

$("#clicks").on('click', '[id^=pin]', function (e) {
    $("#clicks .pin").css('z-index', 'auto'); // reset zIndex on all .pin elements
    $(this).css('z-index', 9999);             // set the clicked pin to the top
});

Answer 2

$("#clicks").on('click', '[id^=pin]', function (e) {
    $('[id^=pin]').css('z-index', '0'); //set z-index to all elements here
    $(this).css('z-index', '9999');
});