Even / odd css change using jquery event in sortable

Question

I have set of divs built in php based on the data I load in, and I use sortable for the users to be able to change to order and save it. To make it more comfortable to use I'd like every second div in set to be of different format. This code works when I move one "even" div to another "even" position, otherwise when I place "even" div to where "odd" one is it starts to color all between them as "odd".

Code:

$( ".droppable" ).sortable({
  update: function( ) {
    $(".draggable:nth-child(even)").addClass("even");
    $(".draggable:nth-child(odd)").addClass("odd");
  }
});

What do I do wrong? Cheers for help!

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

What did I do wrong?

You used jQuery.

Use CSS:

.draggable:nth-child(even) {
    background: #eee; /* Or whatever you want */
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 20 '14 at 22:22

bjb568

11,089
11
50
71

What browser? Jsfiddle? – bjb568 Apr 20 '14 at 22:25
It should be on even, not odd. Not your mistake, you couldn't know that I have every even one grey :) – IRMA Apr 20 '14 at 22:28
But I know nth-child doesn't work on IE8, is there a way to make it work there? This is the reason I use jquery for this on every other structure. – IRMA Apr 20 '14 at 22:31
http://stackoverflow.com/questions/10577674/how-to-make-internet-explorer-8-to-support-nth-child-css-element – bjb568 Apr 20 '14 at 22:32
Mate thanks for you help, this thing sorted me out. Thanks for keepin it awesome here. <3 – IRMA Apr 20 '14 at 22:44

score 1 · Answer 2 · answered Apr 20 '14 at 22:30

1

I would use CSS pseudo-classes

DEMO http://jsfiddle.net/UAcC7/737/

li:nth-child(odd) {
    color: green;
}
li:nth-child(even) {
    color: red;
}

answered Apr 20 '14 at 22:30

Kevin Lynch

24,427
3
36
37

score 0 · Answer 3 · answered Apr 20 '14 at 22:31

0

Change the order of the addclass statements and check if it makes a difference.

answered Apr 20 '14 at 22:31

Tim van Steenbergen

145
1
11

Even / odd css change using jquery event in sortable

3 Answers3

You used jQuery.