CODEWITHSUNDEEP
javascriptjqueryhtmltextclassname
jjj
jjj

Reputation: 2672

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?

Upvotes: 2

Views: 8391

Answers (5)

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

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);
    }

}

Upvotes: 1

Amadan
Amadan

Reputation: 198304

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.

Upvotes: 1

user3771102
user3771102

Reputation: 558

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

Upvotes: 3

Mohammad
Mohammad

Reputation: 21489

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>

Upvotes: 3

Endless
Endless

Reputation: 37786

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>

Upvotes: 2

Related Questions