Using :not selector with jquery variable

Question

After looking at jQuery selector with variable in the selector and a few other posts, I'm not finding an answer to my question, which makes me think maybe I'm maybe going about it wrong.

I have a .car_ul li element being passed in as 'el',

I'm trying to operate on $('.car_ul:not(:animated)') using $(':not(:animated)',adult) - wondering how I can do that?

slideLeft: function(el) {

                var adult = el.parent.attr('class')
                var itemWidth = el.outerWidth() + 10
                var leftIndent = parseInt(adult.css('left')) + itemWidth


        $('.car_ul:not(:animated)').animate({'left' : leftIndent}, 500,
                        function() {
                            $('.car_ul li:first').before($('.car_ul li:last'))
                            $(adult).css({'left':'-160px'})
                        })

            },

the property is named className, FYI. the object version of adult should have worked. Provide html required to recreate your problem and we may be able to help further. — user400654
– user400654, Commented Mar 10, 2014 at 19:02
@Scimonster - don't use jQuery unless needed. el.parentNode.className works just fine, and much faster. — PlantTheIdea
– PlantTheIdea, Commented Mar 10, 2014 at 19:05
Are you trying to target .car_ul elements or descendants of the .car_ul elements. Also, it'd probably be a lot easier to understand if you just posted your code instead of trying to talk through it. — Jason P
– Jason P, Commented Mar 10, 2014 at 19:07
Sorry, posted code so you can actually see what I'm doing. Need to be better about doing that in the first place. — LouisK
– LouisK, Commented Mar 10, 2014 at 19:27

PlantTheIdea · Accepted Answer · 2014-03-10 20:26:53Z

1

Since you asked for possible optimization points:

slideLeft:function($el){
    var $adult = $('.'+$el.get(0).parentNode.className),
        itemWidth = $el.outerWidth() + 10,
        leftIndent = parseInt($adult.css('left'),10),
        $menu = $('.car_ul'),
        $li = $menu.find('li');

    $menu.not(':animated').animate({left:leftIndent},500,function(){
        $li.first().before($li.last());
        $adult.css({left:-160});
    });
},

since you really need the adult object, capture that in a variable as an object
use base 10 for parseInt function (always do this)
cache .car_ul and its respective li
use the .not() method to leverage caching of .car_ul
use the .first() and .last() methods to leverage caching of li
use the DOM names and numeric values rather than the string values for CSS assignments

I also renamed your el variable to $el ... this is more stylistic, but its generally considered best practice to call out jQuery objects vs DOM elements with the naming convention.

Hope this helps!

edited Mar 10, 2014 at 20:26

answered Mar 10, 2014 at 19:51

PlantTheIdea

16.4k5 gold badges37 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LouisK Over a year ago

Definitely! All the pointers are much appreciated, as I'm just getting into using the module pattern, and also not great at JS/jQuery.

Collectives™ on Stack Overflow

Using :not selector with jquery variable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related