Move background position on click event with jQuery

Question

im trying to move the background position of an element when a certain div is clicked only I cant seem to get it working.

My jquery seems fine from the documentation?

$(this).children('ul li').css('background-position-x','100px');

see also: http://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery — MikeM, Jan 08 '13 at 16:58

score 7 · Accepted Answer · answered Jan 08 '13 at 16:53

7

Use find() instead of children():

$(this).find("ul li").css("background-position-x", "100px");

DEMO: http://jsfiddle.net/shqcu/1/

answered Jan 08 '13 at 16:53

VisioN

1
children is immediate "offspring" of the parent so your `
` might only have `
` as "children" but has lots of little `
` grandchildren or descendents...`find()` gets all descendants
– MikeM Jan 08 '13 at 16:56
@Liam This is because a selector in `children` is used to *filter* children elements, but not to find elements among the descendants. – VisioN Jan 08 '13 at 16:57

score 0 · Answer 2 · answered Jan 08 '13 at 16:56

0

You can't alter an element's background-position with jQuery alone. You need this plugin http://keith-wood.name/backgroundPos.html

answered Jan 08 '13 at 16:56

Anthony

score 0 · Answer 3 · answered Jan 08 '13 at 17:10

0

$(this).css('background-image','url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBFaoYPOnLv_EI4sGOisRrHUGhlHjJp7iY2A4RT1PKXAAPxx3f)');

answered Jan 08 '13 at 17:10

Fatima Zohra

3 Answers3