closest() function is not working, why?

Question

HTML:

<div class="slider">
    <div class="button-wrap">
        <div class="content-wrap" id="button-1">one contents</div>
        <div class="controller">
            <div><a mce_href="#buttton-1" href="#buttton-1">button one </a>
            </div>
        </div>
    </div>
</div>

jQuery:

$('#button-1').closest('.slider').css({'left':'-1200px'});

this is not working.

I have this script so far

<script>
jQuery(function($){
        $('#button-1').closest('.slider').css({'background':'#f00 !important'});
        $('#button-2').closest('.slider').css({'left':'-1200px !important'});
}
</script>

Have you included the jQuery file?? Have you put your code inside the `$(document).ready(function() {`?? — palaѕн, Jul 31 '13 at 08:39
change the css to something obvious to see if the code itself works, maybe background-color or sth. like this. Because the code should work, another suggest would be the markup above is beeing used by for example a jquery-slider-script, it may be that it reorders the DOM and causes your not working function, another point is that to move it to the left it must be positioned relative or absolute, best case with an initial set "left:xyz" property — john Smith, Jul 31 '13 at 08:58
Your 2 blocks of jquery contradict: the first shows `left` being altered on `#button-1`; but the 2nd block shows only background-color being changed on `#button-1`, while `#button-2` gets its left changed. Is that your mix-up? — Faust, Jul 31 '13 at 09:05
no, I changed to background-color so that is it working or not so the result is not working — Navin Rauniyar, Jul 31 '13 at 09:06

score 0 · Answer 1 · answered Jul 31 '13 at 08:38

0

The .slider element needs to have position absolute or relative to be positioned using the left property.

Add the following css:

.slider{
    position: relative; //or absolute
}

Working Example: http://jsfiddle.net/U96gB/

answered Jul 31 '13 at 08:38

Kevin Bowersox

93,289
19
159
189

2

Somebody explain the down-vote (that I just countered). This is most likely the correct explanation. – Faust Jul 31 '13 at 08:40
in my localhost I have add this css .slider{position: relative;} although not working. please see my edited question for script what I'm using. – Navin Rauniyar Jul 31 '13 at 08:50

score 0 · Answer 2 · answered Jul 31 '13 at 08:41

0

I have copy/paste your code and it works :s Make sure you have included jQuery library and maybe you forgot position: relative; on your .slider

answered Jul 31 '13 at 08:41

Guillaume Lhz

904
5
16

score 0 · Answer 3 · answered Jul 31 '13 at 08:46

0

Try this:

$('#button-1').closest('.slider').css({'margin-left':'-1200px'});

answered Jul 31 '13 at 08:46

Dhaval Bharadva

3,053
2
24
35

score 0 · Answer 4 · edited May 23 '17 at 10:31

Remove !important, and it works in your fiddle -- jQuery's .css() gets tripped up on that part.

Some background on the problem can be found in this answer: https://stackoverflow.com/a/2655976/613004

!important is not needed to override other styles from stylesheets, because jQuery applies all declarations that use .css() as inline-styles, which will have higher specificity than any declaration from a stylesheet (see: https://stackoverflow.com/a/11934505/613004 for more on specificity calculations.)

closest() function is not working, why?

4 Answers4