div：包含无效选择器

Question

我正在关注 this example 并输入

$( "div:contains('John')" ).css( "text-decoration", "underline" );

，但出现异常：

VM23376：1 未捕获的 DOMException：无法在“CommandLineAPI”上执行“$”：“div:contains('John')”不是有效的选择器。

Answer 1

函数“$”未知。您可能尝试在未加载 jQuery 库的地方执行此代码。

$( "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>

Answer 2

它按预期为我工作，没有错误，正如您可以看到的屏幕截图。

您也可以运行此链接单击此链接查看示例

<!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>

Answer 3

解决方法： 按文本手动过滤元素：

$('div').filter(function(element){
    return $(element).text().includes('John')
}).css('text-decoration', 'underline' )

Answer 4

您可以使用 JS vanilla 来执行此操作：

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>

Answer 5

我猜这是一个复制粘贴问题。 OP 输入

'div:contains('John')'

而不是

"div:contains('John')"

。正确复制粘贴代码没有任何问题。

<!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>

Answer 6

由于错误中对

CommandLineAPI

的引用，我非常确定这不是 jQuery，而是在 chrome 控制台中加载的 $ 实用程序的命令行版本。我无法在 chrome 上的最新版本上重现该错误，因此它可能已修复。

Answer 7

您可以将该字符串存储在变量中并在 contains 中调用该变量。请看一下这个。希望这对您有帮助。

var name = "John";
$( "div:contains(name)" ).css( "text-decoration", "underline" );

div：包含无效选择器

问题描述投票：0回答：7

7个回答

最新问题

div：包含无效选择器

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7