如何使用JQuery刪除同一元素上的重複類?如何刪除同一元素上的重複類
例子:
<a href="#" class="foo foo">link</a>
我只想要一個類此元素,如下圖所示:
<a href="#" class="foo">link</a>
我已經嘗試過,但沒有成功。由於
如何使用JQuery刪除同一元素上的重複類?如何刪除同一元素上的重複類
例子:
<a href="#" class="foo foo">link</a>
我只想要一個類此元素,如下圖所示:
<a href="#" class="foo">link</a>
我已經嘗試過,但沒有成功。由於
可以使用removeClass()
刪除現有的類,添加使用addClass()
一回如下:
$("a").removeClass("foo").addClass("foo");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="foo foo">link</a>
更新(按照評論)
可以擴展如下圖所示的更一般的解決方案,它遍歷一個jQuery對象,並消除任何重複類名jQuery函數的命名空間:
(function($) {
$.fn.removeDuplicateClass = function(className) {
return this.removeClass(className).addClass(className);
};
$.fn.removeDuplicateClasses = function() {
this.each(function (i, element) {
var arr = [],
classList = $(element).attr("class").split(" ");
$.each(classList, function (i, item) {
if (arr.indexOf(item) < 0) {
arr.push(item);
}
});
$(this).attr("class", arr.join(" "));
});
return this;
};
})(jQuery);
$("a").removeDuplicateClasses(); // or $("a").removeDuplicateClass("foo");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="#" class="foo foo">foo dup</a>
</li>
<li>
<a href="#" class="bar foo bar">bar dup</a>
</li>
</ul>
這就是我需要的!多謝你們。 – 2014-10-02 19:13:09
我把它包起來,包括你的初始答案和鏈式能力的自我回報。 – 2018-03-09 15:16:54
你可以得到所有類與.attr()函數:
var element = $('a');
var classes = element.attr('class');
然後你可以分割類:
var classArray = classes.split(' ');
之後,你可以遍歷通過這些類
var temp = Array();
classArray.forEach(function(c){
// check if not exists in temp array
if(temp.indexOf(c) < 0){
// add to temp array
temp.push(c);
}
else {
// remove class (and add again to get it once)
element.removeClass(c).addClass(c);
}
});
看這個http://jsfiddle.net/fwkj1pLz/1/的一個例子。
感謝您的回答@Mathias – 2014-10-02 19:27:32
您也可以使用hasClass來檢查元素是否包含您正在查找的重複類,然後刪除不需要的元素並再次返回。鏈接Demo
<a href="#" class="foo foo">link</a>
var elem = $('a');
alert(elem.attr('class'));
if (elem.hasClass('foo foo')){
elem.removeClass("foo").addClass("foo");
alert(elem.attr('class'));
}
向下投票,敢於評論? – 2014-10-02 17:47:28
感謝您的回答@Dennis R. – 2014-10-02 17:52:08
是什麼,如果有多個條目 – 2014-10-02 17:15:39
因爲有一個插件的錯誤,我需要刪除重複類的問題。 – 2014-10-02 17:22:26
@T J,我很抱歉,我是新手在stackoverflow。我選擇Mathias的答案,因爲它更完整,有一個循環,那就是我需要的。 – 2014-10-02 17:50:55