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我得說，一個表單標籤未在列表標籤​​允許...

編輯：

大衛拜爾斯，不要惹惱你，但你的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").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()。