如何从 jquery 中的“this”引用中获取类名答案

【问题标题】：How get class name from 'this' reference in jquery如何从 jquery 中的“this”引用中获取类名
【发布时间】：2016-09-24 05:34:06
【问题描述】：

我想知道如何从this 引用中获取元素的类名。我有以下 HTML 元素

<input type="checkbox" class="NotSelected @placeholderString" onchange="SaveCompairedOffers(this);">

jQuery 代码

function SaveCompairedOffers(obj) {
    //Hiding irrelevant code from here

    AddCompareOfferInCompareBox();
}

在 AddCompareOfferInCompareBox 函数中，我想在 compare-box 类上附加对象的类名。

function AddCompareOfferInCompareBox()
{
    var innerHtml = "";
    $('.SelectedOffer').each(function () 
        //append class name of current passed object to this div
        innerHtml = innerHtml + '<div class="compare-box"></div>';
    });
    $(".AddCompareOfferByMe").html(innerHtml);
}

我该怎么做？

【问题讨论】：

哪个类名？我猜@placeholderString？
@Satpal 是的
$(this).attr("class") 给出 NotSelected @placeholderString

标签： jquery class jquery-selectors

【解决方案1】：

最简单的方法是香草 javascript。在您想要引用this 的函数中，添加以下代码以将您的类分配给一个变量：

var classes = this.className

如果要获取所有类的数组，可以使用 split() 函数来实现，如下所示：

var classes = this.className.split(' ')

【讨论】：

【解决方案2】：

我建议你使用data-* 前缀属性来存储任意数据。

<input type="checkbox" class="NotSelected" data-str="@placeholderString" onchange="SaveCompairedOffers(this);">

这可以使用HTMLElement.dataset 属性获取

HTMLElement.dataset 属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性 (data-*)。它是 DOMString 的映射，每个自定义数据属性都有一个条目。

function SaveCompairedOffers(obj){
   var str =  obj.dataset.str;
   AddCompareOfferInCompareBox(str );
}

function AddCompareOfferInCompareBox(str)   {       
    $('.SelectedOffer').each(function () 
        $('<div></div>', {
           "class" : "compare-box " + str
        }).appentTo(".AddCompareOfferByMe");        
    });
}

但是如果你还想使用类名，那么可以使用Element.className属性。

className 获取并设置指定元素的类属性值。

用法

function SaveCompairedOffers(obj){
   var str =  obj.className;
}

【讨论】：

【解决方案3】：

要回答实际问题，如何从 jQuery 引用中获取分配给对象的 css 类，试试这个：

var elementClass = ($(myselector).prop('className');

【讨论】：