使用html文本作为JS的CSS选择器？

Question

我确定其他人已经问过这个问题，但我找不到任何可以帮助我的事情。

查看this code on jsfiddle。

Person1和Person2都有

class="from"

CSS选择器是.from所以它适用于两者，但我试图实现它只适用于使用JavaScript / jQuery的Person1。

我尝试了很多东西，比如

$( "span.from:contains('Person1')" )

没有成功。我该怎么做？

非常感谢帮助：）

Answer 1

在您的情况下，您可以使用 filter()

$("span.from").filter(function(){ return this.innerHTML == "Person1"; })

删除项目的动画，使用 removeClass()

删除课程

$("span.from").filter(function(){ 
     return this.innerHTML == "Person1"; 
}).removeClass('from');

Answer 2

您的代码可以正常工作

$("span.from:contains('Person1')").text()

请参阅this小提琴

Answer 3

$( "span.from:contains('Person1')")效果很好。但是在css中，你仍然会影响.from类的所有元素。在使用Javascript获取元素后，您应该对其执行某些操作，例如添加新类，并更改css以便动画仅在新类上运行。

$( "span.from:contains('Person1')").addClass('newClass')

CSS：

.newClass{
    -webkit-animation: color-change 1s infinite;
    ...
}

Answer 4

如果您使用直接CSS，您应该只能使用第n个子选择器选择第一个项目：

.from:nth-of-type(1) { /* styles here */ }

如果你想通过JS选择第一个项目，你只需要使用eq（）来按索引获取第一个项目。这是可链接的，所以你可以继续在这个项目上设置类似于此的set CSS（所以在这个例子中我在第一个.from上添加了一个额外的类，并且还设置了它的背景颜色）：

$(".from").eq(0).addClass("first-item").css("backgroundColor", "orange");

Answer 5

您可以尝试使用.not()

$(".from:not(span:contains('Person2')):eq(0)")