改变css JQuery不起作用

Question

i'm trying to change css of class in my HTML. I'm struggling with that already a long time, and I'm not getting what i'm doing wrong. (I've tried already many versions, but nothing happends)

For example: I would like to change the row height on this following html:

game.html

<div class="game">
<ul class="each" data-bind="foreach: {data: rows, as: 'row'}">
    <li class = "li">
        <ul class="row" data-bind="foreach: {data: row.beads, as: 'bead'}">
            <li class="bead" data-bind="
            currentSide: left,
            drag: bead.drag.bind(bead),
            ></li>
        </ul>
    </li>
</ul>

app.css

.row {position: relative;
max-width: 3000px;}

game.html

$( document ).ready(function() {
    var windowHeight = $( window ).height();
    var rowHeight = windowHeight/5;
    $('.row').css('max-width', rowHeight);
});

Answer 1

<li class="bead" data-bind="
            currentSide: left,
            drag: bead.drag.bind(bead)">//Missing closing ", Avoided extra ,

And

$('.row').css('max-width', rowHeight + "px");//Add `px`

Demo Fiddle

Answer 2

$( document ).ready(function() {
    var windowHeight = $( window ).height();
    var rowHeight = windowHeight/5;
   $('.row').css('max-width', rowHeight + 'px');
});

This oughta do it.!!!

You have to append px:

$('.row').css('max-width', rowHeight + 'px');

Answer 3

This will not work: $('.row').css('max-width', rowHeight);

This will: $('.row').css({maxWidth: rowHeight + 'px'});

Answer 4

You're doing:

$('.row').css('max-width', rowHeight); // outputs 100

You have to append px :

$('.row').css('max-width', rowHeight + 'px'); // outputs 100px

Answer 5

To change the height of the row

$('.row').css('max-width', rowHeight);

Needs to be

$('.row').css('max-height', rowHeight + 'px');

You need to append the px to the value and change max-width to max-height

And you need to change this typo: -

drag: bead.drag.bind(bead),

To: -

drag: bead.drag.bind(bead)"