jquery addClass() to first position of multiple classes

Question

what it does:

<p class="foo"></p>
$('p').addClass('bar');

output:

<p class="foo bar"></p>

what i need:

<p class="bar foo"></p>

So is it possible to add a class to an element to the first position?

edit (context): theres a split function on the last class right now. if another class is added its appended to the second split array as well.

I am not sure and I don't know if it's a good practice if you just remove `foo`, then add `bar` and add again `foo` — Oscar Jara, Jan 22 '13 at 15:19
@algorhythm Um because the order dictates which style's values override the other. In this case if both `foo` and `bar` indicated a `font-size` the first one would take precedence. — thatidiotguy, Jan 22 '13 at 15:19
@thatidiotguy overriding order where? If you mean CSS that's based on the order they're defined, not applied. — Explosion Pills, Jan 22 '13 at 15:20
You could add bar to the parent element. Then foo would override it. — Lee Meador, Jan 22 '13 at 15:21
@ExplosionPills You mean in the stylesheet? really, i had no idea that was the case. I guess I have just gotten lucky O.O — thatidiotguy, Jan 22 '13 at 15:22
Why you need a method for this? you can try `(..).prop('class', 'firstClazz')` and just concat your next class to get `(..).prop('class', 'secondClazz firstClazz')` — Oscar Jara, Jan 22 '13 at 15:31
@algorhythm read mine, I explained you and didn't use any method to achieve that :-) — Oscar Jara, Jan 22 '13 at 15:37

score 17 · Answer 1 · answered May 23 '14 at 22:50

17

 (function($) {

    jQuery.fn.extend({
        prependClass: function(newClasses) {
            return this.each(function() {
                var currentClasses = $(this).prop("class");
                $(this).removeClass(currentClasses).addClass(newClasses + " " + currentClasses);
            });
        }
    });

})(jQuery);

answered May 23 '14 at 22:50

user3670510

171
1
2

This should be the accepted answer. It properly ensures the class is not added twice, and creates a nice little jQuery function. – random_user_name Apr 19 '17 at 23:38

score 8 · Accepted Answer · answered Jan 22 '13 at 15:21

8

function prependClass(sel, strClass) {
    var $el = jQuery(sel);

    /* prepend class */
    var classes = $el.attr('class');
    classes = strClass +' ' +classes;
    $el.attr('class', classes);
}

answered Jan 22 '13 at 15:21

algorhythm

8,530
3
35
47

Are you sure you can use `class` as variable? I think its a reserved word. – Oscar Jara Jan 22 '13 at 15:25
@OscarJara I changed it at same time ;) – algorhythm Jan 22 '13 at 15:25

score 5 · Answer 3 · answered May 10 '17 at 12:30

5

Here's another way to do it.

$('#foo').attr('class', 'new-class ' + $('#foo').attr('class'));

answered May 10 '17 at 12:30

J. Minjire

1,003
11
22

This is the best option as it takes the original class list and adds your necessary, new class name then adds it at the beginning. Nice work, John! – Jester Jun 27 '19 at 17:26

score 3 · Answer 4 · answered Jan 22 '13 at 15:20

3

This should not be a dependency for you in any way at all because of the limited control you have over the className string, but you can do this:

$("p").removeClass('foo').addClass('bar foo');

answered Jan 22 '13 at 15:20

Explosion Pills

188,624
52
326
405

Oscar Jara · Answer 5 · 2013-01-22T15:27:26.950

0

You can try this, live demo:

http://jsfiddle.net/oscarj24/eZe4b/

$('p').prop('class', 'bar foo');

Otherwise you will need to play around with addClass and removeClass to get bar foo result in that order.

By the other hand, I don't get at all your question but if you just want to add bar foo class to the first p element just do this:

$('p').eq(0).prop('class', 'bar foo');

edited Jan 22 '13 at 15:27

answered Jan 22 '13 at 15:22

Oscar Jara

14,129
10
62
94

1

what is if you add further classes to the orig. DOM-element. Then they will be deleted... – algorhythm Jan 22 '13 at 15:30
@algorhythm you can try `$(..).prop('class', 'firstClazz')` and just concat your next class to get `$(..).prop('class', 'secondClazz firstClazz')` and if there is other one then `$(..).prop('class', 'thirdClazz secondClazz firstClazz')` what matters is the string that you pass as the second argument in the `.prop()` method – Oscar Jara Jan 22 '13 at 15:32
1

Right, and then you have my solution ;) – algorhythm Jan 22 '13 at 15:36

score 0 · Answer 6 · answered Apr 04 '19 at 15:59

Here's a no-hack solution for this:

$(".product").each(function(i, el) {
  var cList = [];

  $.each(this.classList, function(index, val) {
    cList.push(val);
  })

  this.classList.remove(...cList);

  cList.unshift("first-class");

  this.classList.add(...cList);

  // here it is
  console.log(this.classList);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="product type-product status-publish">a</li>
  <li class="product type-product status-publish">b</li>
  <li class="product type-product status-publish">c</li>
</ul>

jquery addClass() to first position of multiple classes

6 Answers6

Linked

Related