jquery - jquery addClass() 到多个类的第一个位置

Question

它能做什么：

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

输出：

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

我需要的：

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

那么是否可以将一个类添加到一个元素的第一个位置？

编辑（上下文）：现在最后一堂课有一个拆分功能。如果添加了另一个类，则它也将附加到第二个拆分数组中。

Answer 1

 (function($) {

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

})(jQuery);

Answer 2

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

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

Answer 3

这是另一种方法。

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

Answer 4

由于您对className字符串的控制有限，这根本不应该成为您的依赖项，但您可以这样做：

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

Answer 5

你可以试试这个，现场演示：

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

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

否则，您将需要使用addClass并按该顺序removeClass获得bar foo结果。

---

另一方面，我完全不明白您的问题，但是如果您只想将bar foo类添加到第一个p元素，请执行以下操作：

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

Answer 6

这是一个没有破解的解决方案：

$(".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>