jQuery在元素上方选择LI

Question

我试图选择按钮上方的列表项，并将其父级的background-color更改为红色。

    <li>red bg on click <input class="addtocart" value="press" name="button"></li>
    <li>red bg on click <input class="addtocart" value="press" name="button"></li>
    <li>red bg on click <input class="addtocart" value="press" name="button"></li>
    <li>red bg on click <input class="addtocart" value="press" name="button"></li>

到目前为止的jQuery：

$(document).ready(function() {
  $(".addtocart").click( function(){
     $('li').parent().css('background-color', 'red');
  });
});

从我所看到的来看，它看起来是正确的，但是它似乎正在更改其他元素的background-color 。

谢谢

Answer 1

用this

$(this).parent().css('background-color', 'red');

Answer 2

尝试：

$(document).ready(function() {

      $(".addtocart").click( function()
           {
             $(this).closest('li').css('background-color', 'red');
           }
      );
});

Answer 3

您的选择器有误。 尝试将this用于当前元素

当您使用$('li') ，它将应用于所有li元素

$(this).parent().c....

Answer 4

您需要当前点击的元素

$(this).parent().css('background-color', 'red');

演示： 小提琴

Answer 5

尝试更改为此：

$(this).parent().css('background-color', 'red');