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

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元素中，這可能是問題所在。

在控制台中，您應該看到類似以下的錯誤

未捕獲的HierarchyRequestError：無法在“節點”上執行“ insertBefore”：類型“ 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>ab c</li> <li>xy z</li> </ul> 

注意：仍然不會給您想要的輸出，因為它將包裝所有祖先元素，而且您也不能包裝帶有strong元素的li

---

所以，你可以將搜索范圍限制只對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>ab c</li> <li>xy 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);

小提琴

Answer 3

也許需要這些，請嘗試以下方法：

1. 全選
2. 添加DOM [strong]（添加*強）
3. 在*中添加[strong]->> 2.重復執行[strong] .... <<-需要