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

问题

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

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?

回答1:

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

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

and the js code will be

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

$("div:contains(UniqueText)")

Select both of bottom divs

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

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

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)

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" ).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):

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.

You also cannot specify exact match using the jQuery :contains, like here. If substring matching was indeed needed, you can change the 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.

来源：https://stackoverflow.com/questions/40906677/how-to-get-class-name-of-element-has-specific-text-using-javascript-jquery

标签

javascript

jquery

html

text

classname