Do stuff if next NOT hasClass?

JavaScript
1

What I want to do is if a div with the class medium-6 NOT has a div next to it that also have the class medium-6 I want to change the class of it (the first one) to medium-12. The problem is I don’t know how to do this.

My code so far looks like this:

if (!$('.posts .medium-6').next().hasClass('medium-6')) {
    $(this).removeClass('medium-6');
    $(this).addClass('medium-12');
}

Could anyone help me?

2

jQuery selectors generally return sets of elements, or collections. What this means is that you need to iterate over the collection and make the changes accordingly.

So you need to look for the elements that have no div siblings (with that class) and change their class attribute.

1 Like
3

Thanks for the reply.

Okey I understand what you mean, but since I am a newbie at jquery/js I can’t say I really know what to change in my code?

you say “So you need to look for the elements that have no div siblings (with that class) and change their class attribute.” but in my newbie eyes this is what I do here (!$(‘.posts .medium-6’).next().hasClass(‘medium-6’)) , I guess I am wrong?=)

4

You should think “not has” and in jQuery this is $('.posts .medium-6'):not(:has()).

5

Thanks will try it out, I’l reaply with the result:P

6

Still pretty lost it seems=)

Tried this:

$('.posts .medium-6'):not(:has(.next('.medium-6'))) {
    $(this).removeClass('medium-6');
    $(this).addClass('medium-12');
}

And this:

$('.posts .medium-6').next():not(:has('medium-6')) {
    $(this).removeClass('medium-6');
    $(this).addClass('medium-12');  
}

None worked:P

7

Have you tried next as in :has(+ div)?

8

Im lost. Can’t figure out how to do it.

Tried:

if($('.posts .medium-6:not(:has( + .medium-6))')){
  $(this).removeClass('medium-6');
}

It did not work, as I expected:P

This is all probarly pretty easy jquery but for me… not so much:P

Have I been close to the solution in any of my code snippets?

9 
var m12 = $('.medium-6:first-child').filter(function() {
    return !$(this).siblings('.medium-6').length
});

$(m12).removeClass('medium-6').addClass('medium-12');
10 
    $('.medium-6:not(:has(+ .medium-6))')
       .removeClass('medium-6')
       .addClass('medium-12');
11

Thanks dude, two solutions that do the same thing I guess?

12

I’m pretty sure the first one is correct, I’m not so sure about the second one, you may need to work with the parent element for that.

13

Yeah, I forgot about the :first-child:

$('.medium-6:first-child:not(:has(+ .medium-6))')
    .removeClass('medium-6')
    .addClass('medium-12');
14

Don’t know if first-child can be used to, let me show you an example of how the layout could look:

<div class="medium-6"></div>
<div class="medium-6"></div>
<div class="medium-6"></div> <!-- The jquery needs to apply to this one -->
<div class="medium-12"></div>
<div class="medium-6"></div> <!-- The jquery needs to apply to this one -->
<div class="medium-12"></div>
<div class="medium-6"></div>
<div class="medium-6"></div>

So with the jquery this html layout would change to:

<div class="medium-6"></div>
<div class="medium-6"></div>
<div class="medium-12"></div> 
<div class="medium-12"></div>
<div class="medium-12"></div> 
<div class="medium-12"></div>
<div class="medium-6"></div>
<div class="medium-6"></div>

Seems like your code takes the next sibling to the .medium-6 and makes that one .medium-12 .

I should have been more clear in the topic, sorry.

So basicly what I want to archieve is IF a .medium-6 is standalone, not having any next() sibling that also are .medium-6 , make that one .medium-12

15 
$('.medium-6:has(+ .medium-12)')
    .removeClass('medium-6')
    .addClass('medium-12');

If it’s followed by .medium-12 then make it .medium-12 also.

1 Like
16

Or this:

$('.medium-6:not(:last-child):not(:has(+ .medium-6))')
    .removeClass('medium-6')
    .addClass('medium-12');

This is more like what you’re asking for while it avoids the last .medium-6 being transformed to .medium-12.

1 Like
17

Thanks dude, works perfect. Just one more thing i noticed now that I didn’t think of.

If the LAST div in the layout has .medium-6 I don’t want it to change class. Is that possible?

18

I already gave you the solution for this: :not(:last-child):

$('.medium-6:not(:last-child):not(:has(+ .medium-6))')
    .removeClass('medium-6')
    .addClass('medium-12');
1 Like
19

aa yeah sorry thats correct=) It does what I want, thanks.

I noticed tho I need to customize this further tho.

EDIT: Guess I have to look closer on when I want this script to be executed. Now for example if I have:

<div class="medium-6"></div>
<div class="medium-6"></div>
<div class="medium-12"></div>

It takes the second .medium-6 and turns it into .medium-12. But I don’t want this as long as there are 2 or 4 .medium-6 after each other. Only when it is an uneven number of .medium-6.

That means I would need some if-statement I guess?

20

My guess is you’re doing something more complicated than it should.

$('.posts .medium-6:not(:last-child):nth-child(odd):not(:has(+ .medium-6))')
    .removeClass('medium-6')
    .addClass('medium-12');

or something. Every odd .medium-6 that it’s not followed by a .medium-6 will get to be a .medium-12.