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

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

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

Answer 4

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

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 5

这是另一种方法。

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

Answer 6

这是一个 no-hack 解决方案：

$(".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（）到多个类的第一个位置

6 个答案: