如何使用 javascript/jquery 获取元素的 class 名称具有特定文本？

Question

我需要一种 JavaScript 或 jQuery 方法来通过它包含的文本提取 DIV 元素的 Class 名称。

让我们举例说明。如果我让我们说下面的代码：

<div class="_className">UniqueText</div>

我需要知道如何以编程方式执行如下操作：

getClassNameWhereText("UniqueText");

在这种情况下输出应该是：

_className

有办法吗？

Answer 1

您可以使用:contains(word)

var className = $( "div:contains('John')" ).attr("class");
console.log(className)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="foo">John Resig</div>
<div class="bar">George Martin</div>
<div class="foo">Malcom John Sinclair</div>
<div class="baz">J. Ohn</div>

Answer 2

JQuery :contains select 或 select 元素具有特定文本，但不准确。例如

$("div:contains(UniqueText)")

Select 两个底部 div

<div class="_className">UniqueText</div>
<div class="_className2">UniqueText2</div>

您可以使用 .filter() 按文本过滤 selected 元素。

var className = $("*").filter(function(){
    return $(this).text() == "UniqueText";
}).attr("class");

var className = $("*").filter(function(){
    return $(this).text() == "UniqueText";
}).attr("class");

console.log(className);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="_className">UniqueText</div>
<div class="_className2">UniqueText2</div>

Answer 3

您可以为您的 div 保留一个 ID，根据您的信息，您的文本将是唯一的。

<div id="UniqueText" class="_className">UniqueText</div>

而js代码将是

function getClassNameWhereText(text){
    var className = $('#'+text).attr('class');
    console.log(className);
}

更新： 如果你想使用包含那么你可以这样做，

function getClassNameWhereText(text){
    var val = document.getElementById(text).value;
    if(text.indexOf(val)>=0){
        var className = $('#'+text).attr('class');
        console.log(className);
    }

}

Answer 4

通过获取每个函数的所有 div，您可以搜索所有 div 并放置一个条件，使 div 的值等于您想要的特定文本寻找。然后使用 .attr('class').

获取 class 名称

 $( "div" ).each(function(){
       if($(this).text() == "UniqueText"){
        var output = $(this).attr('class');
        $(".output").html(output);
       }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="_classname">UniqueText</div>

<div class="output"></div>

代码可能有点长，但可以很好地完成工作。 :)

Answer 5

这应该比使用 jQuery 更快（但需要输入更多）：

var xpath = "//div[text()='UniqueText']";
var result = document.evaluate(xpath,
    document, null, XPathResult.FIRST_ORDERED_NODE_TYPE);
var node = result.singleNodeValue;
if (node) {
  console.log(node.className);
} else {
  console.error("Not found!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="_className">UniqueText</div>

原因是，浏览器的 CSS 选择器不支持 :contains 选择器，jQuery 需要通过检查与其余选择器匹配的每个节点来模拟它。同上使用 .filter。但是 XPath 是由浏览器本机完成的。

您也不能像此处那样使用 jQuery :contains 指定完全匹配。如果确实需要子字符串匹配，您可以更改 XPath:

var xpath = "//div[contains(text(),'UniqueText')]";

XPath 非常强大，但有点挑剔而且在很大程度上不为人知，所以我发现它的利用率很低，即使它的使用非常合适。

如何使用 javascript/jquery 获取元素的 class 名称具有特定文本？

How to get class name of element has specific text using javascript/jquery?

html

javascript

jquery

text

classname