jQuery select LI above element

Question

I'm trying to select the list item above a button and change its parent's background-color to red.

    <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 so far:

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

From what I can see it looks correct, but it seems to be changing a different element's background-color .

Thanks

Answer 1

用this

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

Answer 2

Try:

$(document).ready(function() {

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

Answer 3

Your selector is wrong . Try to use this for current element

When you use $('li') it will apply to all li elements

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

Answer 4

You need current clicked element

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

Demo: Fiddle

Answer 5

尝试更改为此：

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