jquery - jQueryはページの次のフォームを変更していませんか？

Question

私は次のHTMLコードを持っています：

<ul id="contributorPhotos">
    <li>
        <img src="viewIcon.png" class="View">
        <img src="editIcon.png" class="Edit">
        <img src="deleteIcon.png" class="Delete">
        <form>
            [Form fields to manage first image here]
        </form>
    </li>

    <li>
        <img src="viewIcon.png" class="View">
        <img src="editIcon.png" class="Edit">
        <img src="deleteIcon.png" class="Delete">
        <form>
            [Form fields to manage second image here]
        </form>
    </li>
</ul>

そしてこれを制御する私のjQuery：

<script>
    $(".Edit").click(function() {
        $(this).find("form").css("background-color","#03C");
    });
</script>

ご覧のとおり、現在私がやろうとしているのは、現在の編集ボタンの下にあるフォームの背景色を変更することだけですが、壁にぶつかっています。

なぜこれが機能しないのか誰かが説明できますか？

Answer 1

.find（）は、選択した要素の子孫でのみ機能し、兄弟を探しています。

これを使って：

$(".Edit").click(function() {
    $(this).siblings("form").css("background-color","#03C");
});​

jsFiddleの例。

Answer 2

$（this）.parent（）。find（ "form"）と言う必要があります

Answer 3

<script>
    $.document.ready( function() {
        $(".Edit").click(function() {
            $(this).find("form").css("background-color","#03C");
        });
    }
</script>

クリック関数がクリックイベントにバインドされていない可能性があります。

Answer 4

うーん、フォームタグはリストタグでは許可されていないと言わざるを得ません...

編集：

David Byers、あなたを困らせることはありませんが、あなたのhtmlは間違っています...画像タグはリストタグで許可されていません..どちらもフォームタグではありません..cssでur'ボタン'に背景画像を追加する必要があります... htmlは次のようになります。

<div class="contributorPhotos">
        <!-- give background image and with to ur list tags -->
    <ul>
        <li class="View">View</li>
        <li class="Edit">Edit</li>
        <li class="Delete">Delete</li>
    </ul>

    <form>
        [Form fields to manage first image here]
    </form>
</div>

Answer 5

代わりに使用してください：

$(".Edit").click(function() {
    $(this).closest('li').find("form").css("background-color","#03C");
});

あなたが直面している問題は、そのfind()仕組みです。現在の要素（この場合、$('.Edit')画像である要素は、内のセレクターによって定義された要素を探しますfind。画像に含めることはできません）上記の代替要素は、親要素に移動してから、その要素li内で。を検索します。form

次のものを使用することもできます。

$(".Edit").click(function() {
    $(this).siblings("form").css("background-color","#03C");
});

要素の兄弟要素の中から検索し$('.Edit')ます。

参照：

• closest()。
• find()。
• siblings()。