Jquery获取包含具有特定html值的子元素的元素

我想使用Jquery向“li”元素添加一个类，该元素包含html/val等于零的“span”元素。Jquery获取包含具有特定html值的子元素的元素

例如，如果我的代码如下所示：

<ul> 
    <li><span>Item 1</span><span class="num">30</span></li> 
    <li><span>Item 2</span><span class="num">0</span></li> 
    <li><span>Item 3</span><span class="num">20</span></li> 
</ul>

我想将其更改为以下：

<ul> 
    <li><span>Item 1</span><span class="num">30</span></li> 
    <li class="disabled"><span>Item 2</span><span class="num">0</span></li> 
    <li><span>Item 3</span><span class="num">20</span></li> 
</ul>

在过去，我已经使用代码来检查元素属性值，但从来没有他们的HTML/VAL做这种效果...

$('li').has('span.num').addClass('disabled');

然而，在这种情况下，结果：

<ul> 
    <li class="disabled"><span>Item 1</span><span class="num">30</span></li> 
    <li class="disabled"><span>Item 2</span><span class="num">0</span></li> 
    <li class="disabled"><span>Item 3</span><span class="num">20</span></li> 
</ul>

这显然是不打算工作...谢谢

来源

2012-02-01 Jeremy A. West

为什么要添加选定的类而不是禁用的类？ – palAlaa 2012-02-01 19:32:54

因为我们正在禁用项目，用户没有选择任何东西。 – 2013-01-23 14:24:25

这应该做你想要什么。

$('li').each(function(){ 
    if($(this).find('span.num').text() == '0') $(this).addClass('disabled') 
});

JS Fiddle

我会建议如下：

$('li').has('span.num:contains(0)').addClass('disabled')

但它不工作，因为它会检查值在HTML中存在 - 不完全匹配。在这种情况下，每个span.num元素都有一个0，所以每个li都会得到所选的类。似乎没有：：equals（）对应于：contains（）选择器。

来源

2012-02-01 19:39:30

这很好。谢谢 – 2012-02-01 19:57:38

我很欣赏使用.has和“contains”的附加评论。这正是我希望采取的方法。也许这是不可能的，但谁知道我将来可能需要这样的东西。 – 2012-02-01 20:06:53

尝试：

$('li span.num').filter(
    function(i){ 
     return $(this).text() == '0'; 
    }).closest('li').addClass('selected');

JS Fiddle demo。

来源

2012-02-01 19:29:21

这不会产生OP所要求的输出。 – ShankarSangoli 2012-02-01 19:37:11

你为什么要返回$（this）而不是真或假？ – gdoron 2012-02-01 19:37:18

@ShankarSangoli：哎呀。是啊，你说得对。出于某种原因，我认为他想要'30'跨度。谢谢！并编辑！ =） – 2012-02-01 19:45:54

试试这个。

$('ul span.num').filter(function(){ 
    return $(this).text() == "0"; 
}).parent().addClass('disabled');

Demo

来源

2012-02-01 19:32:13 ShankarSangoli

我没有马上看这个，但是这个效果很好，所以+1。 – 2012-02-01 20:42:30

使用.filter vs有没有任何性能优势。每？ – 2012-02-01 20:43:20

'filter'和'each'用于2种不同的操作。当你想过滤匹配的元素集合时，你可以使用'filter'，根据'each'用来遍历所有匹配的元素集并对它们进行任何操作。在你的情况'过滤器'适合最好的，因为你想过滤元素（文本== 0），并应用所需的类（disbaled）。 – ShankarSangoli 2012-02-01 20:55:40

您可以filter()的<span>元素匹配，然后得到其父<div>与parent()：

$("li > span.num").filter(function() { 
    return $(this).text() === "0"; 
}).parent().addClass("disabled");

来源

2012-02-01 19:32:50

如何在'span.num'之外的文本中添加span？ – ShankarSangoli 2012-02-01 19:38:45

你的意思是像“Item 1”这样的文字吗？在提问者标记中已经有''这些元素。我错过了什么吗？ – 2012-02-01 19:40:33

噢，是的，你说得对：P – ShankarSangoli 2012-02-01 19:41:45

这里有一个快速的方法来给它：

$('li .num').each(function(){ 
    if ($(this).text() == '0') $(this).parent().addClass('disabled'); 
});

随着jsFiddle example。

来源

2012-02-01 19:42:03 j08691

Jquery获取包含具有特定html值的子元素的元素

回答

相关问题