试图从 jQuery 中有两个元素的元素中获取 1 个类答案

【问题标题】：trying to get 1 class from an element that has two in jQuery试图从 jQuery 中有两个元素的元素中获取 1 个类
【发布时间】：2010-12-13 18:50:16
【问题描述】：

我想定位一个设置了两个类名的元素：

例如

<li style="display:none;" class="productList product-1">
    <p class="removeIcon"><img src="images/remove-icon.jpg" align="Remove Product" /></p>
    <span class="companyName">Company 1 goes here and here is a test for two lines</span>
</li>

当我尝试在 jQuery 中获取 li 的类时：

var parent = $(this).parent().get(0).className();

它返回“productList product-1”我希望能够返回或减少输出为：“product-1”。我知道这可能很容易，但我现在不知道有什么方法。

我也需要它按照类定义的顺序。另一个功能是使用“productList”部分...

如果有办法，我可以只删除第一部分吗？

【问题讨论】：

标签： jquery class

【解决方案1】：

this.parentNode.className.split(' ')[1];

或使用 jQuery：

$(this).parent().attr('class').split(' ')[1];

但我更喜欢第一个。

【讨论】：

【解决方案2】：

我想定位一个具有上面设置了两个类名

if($(this).hasClass('firstOne') && $(this).hasClass('secondOne')) {
   ...
}

【讨论】：

【解决方案3】：

var parent = $(this).parent().attr('class').split(' ')[1];

这应该可以为您完成工作！

【讨论】：

【解决方案4】：

就其本身而言，不是回答您的问题，而是另一种选择：.data()

虽然将类用于这种类型的数据存储很常见，但它们并不是最理想的，这在很大程度上是因为必须将数据解析出来，正如您所见。然而，最新版本的 jQuery 支持 HTML5 样式的"data attributes"，它可以更好地完成相同的工作。（并且确实可以使用 HTML4 和 XHTML，尽管您会遇到验证错误。）

要使用它们，请将您的 HTML 更改为：

<li style="display:none;" class="productList" data-product="1">
    <p class="removeIcon"><img src="images/remove-icon.jpg" align="Remove Product" /></p>
    <span class="companyName">Company 1 goes here and here is a test for two lines</span>
</li>

在 jQuery 中，您可以使用 .data():

var parent = $(this).parent().get(0).data("product"); // parent === 1

（请注意，HTML 中的 "1" 会自动从字符串转换为数字。）

【讨论】：