How can I get a unique CSS Selector for a DOM element given the element's value?
Question
Let's say I have the following document:
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
Given the string "Hello world", how can I search the document and generate a CSS Selector for the correct element(in this case, the h1)?
2 answers
solution1
2 2017-01-25 16:39:21
Okay, that was sloppy -- if you use $(":contains"), you get the entire tree down to the innermost element. Using this, you find the innermost node.
var myContainer = $(":contains('Hello world') "); while(myContainer.children().length != 0) { myContainer =myContainer.children(); } myContainer.addClass("foo");
.foo { border: 1px dotted blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <h1>Hello world</h1> </body> </html>
Or, to do the same thing with a single selector:
$(":contains('Hello world'):not(:has(*))").addClass("foo");
.foo { border: 1px dotted blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-pane"> <div class="header-pane"> <h1>Hello world</h1> </div> <div class="inner-content"> <h2> Hello world is me! </h2> </div> </div>
solution2
0 2017-01-25 18:12:11
If you are looking for a pure javascript answer without using a library you could use DOM manipulation/traversal.
I have adapted this code snippet that is designed to traverse a node tree and return the text contents as a string. https://gist.github.com/padolsey/3033511
function getText(node) {
if (node.nodeType === 3) {
return node.data;
}
var txt = '';
if (node = node.firstChild) do {
txt += getText(node);
} while (node = node.nextSibling);
return txt;
}
function checkNode(node) { if (node.nodeType === Node.TEXT_NODE) { var expr= "Hello World"; if (node.textContent.indexOf(expr) >= 0) { node.parentNode.className = "foo"; } } if (node = node.firstChild) { //set to next child and continue if it exists do { checkNode(node); } while (node = node.nextSibling); //while has sibilings } } checkNode(document.body)
.foo { color: red; }
<div> <h1>Hello World</h1> <p>Hello World</p> <h1>Hlelo Wrldo</h1> </div>
I came up with this solutions after some research leading me to this blog post from James Padolsey: Replacing text in the DOM… solved? He talks about the difficulties of traversing elements to accurately get the text they contain because the text shown to the user may be spread over a couple child elements like this:
<p>
This is a <span class="f">te<em>st</em></span>.
</p>
The main topic of that blog post is replacing the text and he has created a very good example of how to do so while respecting strange nesting as shown above. If you are interested in a much more robust solution without including a library I suggest giving his post a read. It is somewhat old but his example at the end works and is also based off the same gist I provided.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.