admin管理员组文章数量:1201361
I'm following this example and typed $( "div:contains('John')" ).css( "text-decoration", "underline" ); , but got an exception:
VM23376:1 Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': 'div:contains('John')' is not a valid selector.
I'm following this example and typed $( "div:contains('John')" ).css( "text-decoration", "underline" ); , but got an exception:
VM23376:1 Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': 'div:contains('John')' is not a valid selector.
Share Improve this question asked Mar 18, 2017 at 16:13 mdatsevmdatsev 3,8793 gold badges23 silver badges42 bronze badges 6 | Show 1 more comment7 Answers
Reset to default 1function '$' is unknow. You probably trying to execute this code in place where jQuery library wasn't loaded.
$( "div:contains('John')" ).css( "text-decoration", "underline" );<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
John
</div>it works for me as expected without an error as you can see the screenshot.
you can run this link also click on this link to see example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contains demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js">.
</script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration",
"underline");</script>
</body>
</html>
Workaround: Manually filter elements by text instead:
$('div').filter(function(element){
return $(element).text().includes('John')
}).css('text-decoration', 'underline' )
You can use JS vanilla to do this :
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return Array.from(elements).filter(function(element) {
return RegExp(text).test(element.textContent);
});
}
// Run Code
let found = contains('span', 'Find');
// You can also search with regex
found = contains('span', 'Find\\s*[A-Za-z]+');
for (let i = 0; i < found.length; i++) {
let elem = found[i];
elem.style.backgroundColor = 'red';
}<p>Some text where you have span tag that said <span>Find Me</span></p>I guess it was a copy-paste issue.
OP typed 'div:contains('John')' instead of "div:contains('John')".
Properly copy-pasted code works without any problem.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contains demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
</script>
</body>
</html>Because of the reference to CommandLineAPI in the error, I am pretty sure this is not jQuery, but the command-line version of $ utility that is loaded in the chrome console. I can reproduce the error on Chrome 57, bot not on Chrome 125, so somewhere in between those two versions this issue was fixed. Lesson learned is be careful when using $ in the chrome console.
You can store that string in a variable and call that variable in contains. Please have a look at this. Hope this will help you.
var name = "John";
$( "div:contains(name)" ).css( "text-decoration", "underline" );
本文标签： javascriptdivcontains not a valid selectorStack Overflow
版权声明：本文标题：javascript - div:contains not a valid selector - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738605348a2102313.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
<div>will still contain the required string. – David Thomas Commented Mar 18, 2017 at 16:42"'$' is undefined", OP's appears to be different – Asons Commented Mar 18, 2017 at 16:45