how to change width of objects in array with jquery

Question

I have some element in my html code like following:

<DIV id="slideshow-container">
    <DIV id="slideshow">
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </DIV>
</DIV>

Now i will get li elements and set width of that with jquery. But my code not work.
The following is my code:

var slides = $('#slideshow li');
var w=$('#slideshow').width();

for(var j=0;j<slides.length;j++){
    slides.get(j).css('width',w);
}

Do you know where is my mistake?
Thanks.

raina77ow · Accepted Answer · 2013-11-06 15:23:53Z

3

Actually, this...

slides.css('width', w);

... should be sufficient. As .css is used as a setter, quoting the doc:

...set one or more CSS properties for every matched element.

Demo.

edited Nov 6, 2013 at 15:23

answered Nov 6, 2013 at 15:16

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

Comments

j08691 · Accepted Answer · 2013-11-06 15:14:42Z

1

I'd change:

for(var j=0;j<slides.length;j++){
    slides.get(j).css('width',w);
}

to:

$('#slideshow li').each(function(){
    $(this).width(w);
});

answered Nov 6, 2013 at 15:14

j08691

209k33 gold badges269 silver badges281 bronze badges

Comments

Royi Namir · Accepted Answer · 2013-11-06 15:14:15Z

0

Change

 slides.eq(j).css('width',w);

To

 slides.eq(j).css('width',w+'px');

x.width() return 80

While in css it should be with unit :

x.css('width','80px')

answered Nov 6, 2013 at 15:14

Royi Namir

149k145 gold badges503 silver badges833 bronze badges

Comments

Paul D. Waite · Accepted Answer · 2013-11-06 15:14:27Z

0

slides.get(j) returns the DOM object for each <li>, rather than the jQuery object.

This should work:

$( slides.get(j) ).css('width',w);

Or, instead of the for loop:

slides.each(function () {
    $(this).css('width', w);
});

answered Nov 6, 2013 at 15:14

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

Comments

tymeJV · Accepted Answer · 2013-11-06 15:14:32Z

0

You're creating an array of those elements, but you actually have to change them on the view, use an each and modify this

var w=$('#slideshow').width();
$("#slideshow ul li").each(function() {
    $(this).css("width", w);
});

answered Nov 6, 2013 at 15:14

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

azz · Accepted Answer · 2013-11-06 15:15:30Z

0

Try replacing

for(var j=0;j<slides.length;j++){
    slides.get(j).css('width',w);
}

with

slides.each(function () {
    $(this).css('width', w + 'px');
});

answered Nov 6, 2013 at 15:15

azz

5,9703 gold badges33 silver badges60 bronze badges

Comments

Erasmus · Accepted Answer · 2013-11-06 16:21:31Z

jQuery Solution (slower, easier to implement)

If jQuery is required for other things in your site, and speed is not really a concern to you, here's the jQuery way to achieve the same result:

$("#slideshow li").width(w);

Non-jQuery solution (faster)

jQuery is significantly slower than simple javascript dom manipulation.

Create a simple library for javascript you need - reuse is good.

jQuery is a very large library for doing something so straightforward.
Note: Example uses namespacing. Encapsulation is better, but namespacing is a good start.

var myNS = {
    elById: document.getElementById,
    elsByParentId: function (id, optionalTagName) {
        var tag = optionalTagName || "*";
        return myNS.elByID(id).getElementsByTagName(tag);
    }
    setWidthForEls: function (els, w) {
        for (var i=0, c=els.length; i < c; i++){
        els[i].style.width = w;
    },
    getWidthOfEl: function (el){
        return el.style.width;
    }
    setWidthForElsFromEl: function (els, el) {
        myNS.setWidthForEls(els, myNS.getWidthOfEl(el));
    }
}

Then, in the code section you are referring to, you just do:

myNS.setWidthForElsFromEl(
    myNS.elsByParentID("slideshow","li"),
    myN.elByID("content")
);

Collectives™ on Stack Overflow

how to change width of objects in array with jquery

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

jQuery Solution (slower, easier to implement)

Non-jQuery solution (faster)

Create a simple library for javascript you need - reuse is good.

Then, in the code section you are referring to, you just do:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

jQuery Solution (slower, easier to implement)

Non-jQuery solution (faster)

Create a simple library for javascript you need - reuse is good.

Then, in the code section you are referring to, you just do:

Comments

Your Answer

Sign up or log in

Post as a guest

Related