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

I need a JavaScript or jQuery way of extracting the Class name of DIV element by the text it contains.

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

Let's illustrate. If I had let's say following code:

我们来说明一下。如果我让我们说下面的代码:

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

I need to to know how to programmatically do something like this:

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

getClassNameWhereText("UniqueText");

In this case output should be:

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

_className

Is there a way to do this?

有没有办法做到这一点?

5 个解决方案

#1

You can keep an id for your div, as per your information your text will be unique.

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

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

and the js code will be

并且js代码将是

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

UPDATE : if you want to using contains then you can do this,

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

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

}

#2

JQuery :contains selector select element has specific text but it isn't exact. For example

JQuery:包含选择器选择元素具有特定文本但不完全正确。例如

$("div:contains(UniqueText)")

Select both of bottom divs

选择两个底部div

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

You can use .filter() to filter selected element by text.

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

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>

#3

You can use :contains(word)

你可以使用: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>

#4

By getting all the div with each function you can search through all the divs and place a condition in which you the value of the div is equal to the particular text that you want to find. Then get the class name by using .attr('class').

通过获取每个函数的所有div,您可以搜索所有div并设置一个条件,其中div的值等于您要查找的特定文本。然后使用.attr('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>

It might be a bit long for a code but it gets the work done nicely. :)

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

#5

This should be faster than using jQuery (but a bit more to type):

这应该比使用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>

The reason is, browser's CSS selectors don't support :contains selector, and jQuery needs to emulate it by checking every node matching the rest of the selector. Ditto for using .filter. But XPath is done natively by the browser.

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

You also cannot specify exact match using the jQuery :contains, like here. If substring matching was indeed needed, you can change the XPath:

您也无法使用jQuery:contains指定完全匹配,就像这里一样。如果确实需要子字符串匹配,则可以更改XPath:

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

XPath is very powerful, but a bit finicky and largely unknown, so I find it is very under-utilised, even when its use would be a perfect fit.

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

#1