Find Out If Class Name Contains Certain Text

Find out if class name contains certain text

You seem to be missing the closing round and square brackets:

Change this:

//body[contains(@class, 'is-mobile'

Into this:

//body[contains(@class, 'is-mobile')]

As a side note, take into account that this code has another slightly hidden issue and it is that you will match things that you do not want to match such as this class attribute: login-page not-is-mobile.

There is no way to simply match that as you would using the CSS3 selector [class~="is-mobile"]. However, you can come around this by doing this:

//body[contains(concat(' ', @class, ' '), ' is-mobile ')]

All those spaces are there to make sure you will match only something between spaces and that it also matches even if it is at the beginning or end of the class attribute.

It is ugly indeed but that is the XPath way of doing this.

xpath - select element that contains text in CLASS name

Your statement is almost correct. You only are missing the SelectAll (*) at the beginning of your Statement. Just add it, and the XPath should work:

//*[contains(@class, "snackbar-info")]

Check if an element contains a class in JavaScript?

Use element.classList .contains method:

element.classList.contains(class);

This works on all current browsers and there are polyfills to support older browsers too.

---

Alternatively, if you work with older browsers and don't want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little:

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

Otherwise you will also get true if the class you are looking for is part of another class name.

DEMO

jQuery uses a similar (if not the same) method.

---

Applied to the example:

As this does not work together with the switch statement, you could achieve the same effect with this code:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

It's also less redundant ;)

XPath using classname and contains text

For a demonstration consider the following HTML:

<div class="credit_summary_item">Professor</div>

There is:

• Only one value of the class attribute i.e. credit_summary_item.
• And the innerText i.e. Professor contains no leading and trailing spaces.

So, to locate this element you can use either of the following solutions:

• Using text():

  //div[@class='credit_summary_item' and text()='Professor']
  

• Using contains():

  //div[@class='credit_summary_item' and contains(., 'Professor')]
  

---

This usecase

But in your usecase it seems contains(@class, 'credit_summary_item') worked which implies the element have multiple classes. So apart from credit_summary_item there are some other values present as class attributes.

Xpath: select div that contains class AND whose specific child element contains text

To find a div of a certain class that contains a span at any depth containing certain text, try:

//div[contains(@class, 'measure-tab') and contains(.//span, 'someText')]

That said, this solution looks extremely fragile. If the table happens to contain a span with the text you're looking for, the div containing the table will be matched, too. I'd suggest to find a more robust way of filtering the elements. For example by using IDs or top-level document structure.

jQuery how to check if the class name contains a certain value

Class names are separated by spaces, so you just need $(something).hasClass('active')

Additionally, you could use the .is() method, like this: $(somthing).is('.active'), which returns true or false.

Finally, you might be better off using it as the selector, like so: $('li.active').doSomething()

jQuery if class name contains

Have you tried using $(document).ready(function(){....}). Here's a solution. Hope it helps!

$(document).ready(function(){     if (jQuery('div.item:contains("Item #SKU987")').length) {     alert("Hello! This works!");}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><div class="item">Item #SKU987</div>

find class name by the text that contains its child node

Based on this topic: XPath to select element based on childs child value

You can select the div element that its child node contains a button which have the text 'aplikuj' by this code:

//div[./p[./a[contains(text(), "aplikuj")]]]

then, you can extend the code above to get all the text of p element in that div by this code:

//div[./p[./a[contains(text(), "aplikuj")]]]/p//text()

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

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

}

---

Related Topics