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 example：

はこれを使用してください。代わりに

Answer 2

あなたは（この）.parent（）$を言う必要がある。（ "フォーム"）

Answer 3

ummmm私は... formタグがリストタグで許可されていないことを言っちゃ

を見つけます編集：

デビッド・バイヤーズ、あなたを悩ませているのではなく、あなたのhtmlが間違っています...画像タグはリストタグには使用できません..フォームタグもありません。 CSSで... 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 4

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

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

Answer 5

使用：それは（要素のために、この場合には（現在の要素内の画像がある$('.Edit')要素を、になります。

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

あなたが直面している問題はfind()作品という方法ですS）find内セレクタによって定義される。画像は、これが働くことができませんでした任意の他の要素を含むことができないように代替、上記、親li要素に移動した後formためその要素内で検索する。

また、使用して試みることができる：$('.Edit')要素の兄弟要素の中で検索します

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

。

参考文献：

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