Question

这是我正在使用的HTML的一个示例。

<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＆gt; div.parent-div＆gt; ul＆gt;李：包含（“颜色”）” 不是有效的选择器。

Answer 1

这是因为{ aps = { alert = { body = "Eureka! 11"; title = "Patient is not doing well"; }; }; category = provider-body-panel; gcm.message_id = 0:149073; gcm.n.e = 1; google.c.a.c_id = 2825604; google.c.a.e = 1; google.c.a.ts = 149073; google.c.a.udt = 0; mutable-content = 1; }与html相同。将html保留在选择器之外。

document

jQuery 的内在工作是它使用document.querySelectorAll。由于文档是根目录，因此您无需在选择器内再次指定它。如果你这样做会失败，因为HTML（文档）不包含名为＆＃34; HTML＆＃34;的元素。

以下代码段可以满足您的需求。

＆＃13;

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

＆＃13;

$("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.
  })
 });

＆＃13;

Answer 2

无需在html选择器

中编写jQuery

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

Answer 3

我不知道这个的原因，但你可以用这样的东西得到它：

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();
   }
})

基于深度子文本内容的jQuery选择器

3 个答案: