jQuery：如何选择具有包含 x 属性的子元素或元素？

Posted 2023-03-05

【中文标题】jQuery：如何选择具有包含 x 属性的子元素或元素？

【英文标题】：jQuery: How to select a child or element with attribute that contains x?

【发布时间】：2014-08-31 09:13:45

【问题描述】：

假设我有一些包含项目的无序列表，其中一个或多个具有“活动”类

<ul id='list'>
  <li class='row active'></li>
  <li attrA='something active'></li>
  <li attrB='active'></li>
</ul>

<ul id='otherList'>
  <li class='row active'></li>
  <li attrA='something active'></li>
  <li attrB='active'></li>
</ul>

我想获取类为“活动”的项目，它是无序列表“列表”的子元素或元素。

我试过了……

$("#list li[class~='active']") $("#list > li[class~='active']")

但无济于事......

这是我的问题的更详细版本。用于打印此输出的代码是...

var listId = "typeahead-3-6260"; console.log( $("#"+listId+" li") ); console.log( $("#"+listId+" li[class~='active']") );

如您所见，第 2 行有一些结果，但第 3 行没有。

【问题讨论】：

什么是attrA 和attrB ..？看到后很困惑..

如果您只是在寻找class 属性，那么您应该已经可以使用，特别是如果下面使用类选择器的任何答案对您有用...跨度>

@BoltClock 对不起，'name' 是这个问题的错字。在我的文件中，它是“类”。而 'x' 只是一个字符串，可以是任何东西，在本例中是 'active'。

@RajaprabhuAravindasamy attrA 或 attrB 只是随机属性，可能是任何属性。我是有原因的，但我想现在已经不重要了。

@user3228667 那你可以看看我的回答..

【参考方案1】：

$("#list li").filter(function()return $(this).attr('name').indexOf("name") >= 0)

【讨论】：

注意，这可以简单地改写为$('#list li[name*="name"]')。

出了什么问题？我尝试了该代码，但我得到的只是一个空对象。奇怪的是，$('#list li') 有效...

【参考方案2】：

使用element.attributes获取属性列表，使用nodeValue获取属性值检查是否有active

Live Demo

$("#list li").each(function()   
  for(i=0; i < this.attributes.length; i++)
     if(this.attributes[i].nodeValue.indexOf('active') != -1)
         $(this).text('has active attribute');
);

【参考方案3】：

正如您所提到的，您需要将“类”属性检查为“活动”，这里的代码可能对您有所帮助

$(document).on('click','#list>li.active',function()
    alert('I am here');
);

JSFiddle