Question

在下面的jQuery代码中，我想突出显示包含“z”的行。不知何故，$（'*'）不起作用。如果我将其修改为$（'li'），它将起作用。

<ul>
  <li>a b c</li>
  <li>x y z</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  (function($) {
    var pattern = /z/i;
    $('*').filter(function() {
      return pattern.test($(this).text());
    }).wrap('<strong></strong>');
  })(jQuery);
</script>

Answer 1

*也会选择html节点，然后您尝试将其包含在可能是问题的strong元素中。

在您的控制台中，您应该会看到类似

的错误

Uncaught HierarchyRequestError：无法执行'insertBefore' 'Node'：'STRONG'类型的节点可能不会插入到节点内输入'#document'。

(function($) {
  var pattern = /z/i;
  var a = $('body *').filter(function() {
    return pattern.test($(this).text());
  }).wrap('<strong></strong>');
})(jQuery);

strong {
  border: 1px solid red;
  padding: 5px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>a b c</li>
  <li>x y z</li>
</ul>

注意：它仍然不能提供所需的输出，因为它将包装所有祖先元素，也不能用li元素包裹strong

因此，您可以将搜索范围仅限于li ul li，或者使用文本节点进行比较

(function($) {
  var pattern = /z/i;
  var a = $('*').contents().filter(function() {
    return this.nodeType == 3 && pattern.test(this.nodeValue);
  }).wrap('<strong></strong>');
})(jQuery);

strong {
  border: 1px solid red;
  padding: 5px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>a b c</li>
  <li>x y z</li>
</ul>

Answer 2

仅包装文字

  (function($) {
    var pattern = /z/i;
    $('*').find("ul li").filter(function(i,v) {
      return pattern.test($(this).text());
    }).wrap('<strong></strong>');
  })(jQuery);

FIDDLE

Answer 3

也许需要这些，请尝试以下方法：

全选
添加DOM [strong]（加*强）
在*添加[strong] - ＆gt;＆gt; 2.重复[strong] ....＆lt;＆lt; - Requires

为什么$（'*'）在jQuery中不起作用

3 个答案: