基於深度兒童文本內容的jQuery選擇器

這是我正在使用的HTML示例。基於深度兒童文本內容的jQuery選擇器

<html> 
    <div class="parent-div"> 
     <ul> 
      <li class="title">Color</li> 
      <li>Red</li> 
      <li class="title">Shape</li> 
      <li>Squared</li> 
     </ul> 
    </div> 
</html>

我想目前的HTML轉換下面的列表項

顏色：紅色
形狀：平方

而這正是我試圖到目前爲止：

$("html > div.parent-div > ul > li:contains('Color')")

然而它拋出異常：

未捕獲的拋出：DOMException：未能執行 'querySelectorAll' 上 '文獻'：HTML> div.parent-DIV> UL>利：包含（'顏色'）' 不是有效的選擇器。

來源

2017-03-29 GiamPy

這是因爲html相同document寫html。將html留在選擇器之外。

$("div.parent-div > ul > li:contains('Color')")

的的jQuery的內部工作是，它使用document.querySelectorAll。由於文檔是根文件，因此不需要在選擇器中再次指定它。如果這樣做，它將失敗，因爲HTML（文檔）不包含名爲「HTML」的元素。

下面的代碼片段將做你想要的。

$("document").ready(function(){ 
 
    //select all the list elements with the class title 
 
    $("div.parent-div > ul > li.title").each(function(){ 
 
    //concat the text of the title element and the next sibling into one string. 
 
    var text = $(this).text() + ": " + $(this).next().text(); 
 
    $(this).html(text); //change the title element's html to set string 
 
    $(this).next().detach(); //delete the value element from the DOM. 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <div class="parent-div"> 
 
     <ul> 
 
      <li class="title">Color</li> 
 
      <li>Red</li> 
 
      <li class="title">Shape</li> 
 
      <li>Squared</li> 
 
     </ul> 
 
    </div> 
 
</html>

來源

2017-03-29 16:53:01 Mouser

沒有必要jQuery選擇

$("div.parent-div > ul > li:contains('Color')")

來源

2017-03-29 16:52:19

我不知道這樣做的理由，但你可以像這樣得到它：

var output = {}; 
var output_index = 0; 
var last_title = ""; 

var allLi = $("#parent-div li"); 
var $this = null; 

for(var i = 0; i < allLi.length; i++){ 
    $this = $(this); 
    if($this).hasClass(title){ 
     last_title = $this.html(); 
    } else { 
     output[last_title] = $this.html(); 
    } 
})

來源

2017-03-29 16:58:48 Diego

基於深度兒童文本內容的jQuery選擇器

回答

相關問題