Menu
I'm trying to find the following node within a page:
<span class="dotted">Admin</span>
I've tried the following jQuery selectors, but neither seem to work in selecting the node:
$(".dotted span:contains('Admin')").css("color","red");
$("span:contains('Admin') .dotted").css("color","red");
What am I doing wrong?
231
To check if a span element contains specific text:Use the textContent property on the element to get the text content of the element and its descendants. Use the includes() method to check if the specific text is contained in the span . If it is, the includes() method returns true , otherwise false is returned.
To identify the element with span tag, we have to first identify it with any of the locators like xpath, css, class name or tagname. After identification of the element, we can perform the click operation on it with the help of the click method. Then obtain its text with the text method.
To select a span containing a specific text value using jQuery, we can select all the spans and then use the filter method to find the one with the given text value. We call $(“span”) to get all the spans. Then we spread the spans into an array with the spread operator.
If you want to makes some particular text or any other content different from the rest, you can wrap it in a span tag, give it a class attribute, then select it with the attribute value for styling. In the examples below, I change the color , background-color , and font-style of some text by wrapping it in a span tag.
This selector should do what you want.
$("span.dotted:contains('Admin')")
Remember you can chain Tag names with IDs and classes. Example
$("span#yourID")
OR
$("span.yourclass")
OR a mixture of the two
$("span#yourID.yourClass")
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
