Javascript來得到非末端節點的HTML元素（比如LI元素）的文本值

Question

我試圖寫一個腳本，將通過HTML源走路，創建將隨後在顯示的DOM的JSON文件使用d3.js的樹視圖我的問題是，不僅顯示元素（TITLE，P，LI，等等），而且元素的值的願望。這很容易，如果我只爲端節點元素（沒有孩子）做。但是，我有時需要它作爲UL低於項目II和B.

 <ul class="level-1"> 
      <li>I</li> 
      <li>II 
       <ul class="level-2"> 
       <li>A</li> 
       <li>B 
        <ul class="level-3"> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        </ul> 
       </li> 
       <li>C</li> 
       </ul> 
      </li> 
      <li>III</li> 
     </ul> 

從下面這行我的函數的父對象正在成爲終端節點，但我無法弄清楚如何爲父母做這沒有打印每個孩子的一切。

$output.append(', "value": "' + $(child).text() + '"}'); 

我已經嘗試了一些從jQuery的第一個孩子的東西，但無法得到它的工作。我也想保持這個儘可能通用的飼料在任何HTML源。換句話說，我不想說，如果（節點名稱= '李'），那麼待辦事宜列表項具體stuff-

var createJsonOutput = function(domObject) { 

    var $currentChildren = domObject.children(); 
    var $childrenCnt = $currentChildren.length 

     $.each($currentChildren, function(idx,child) { 
     $output.append('{"name": "' + child.nodeName + '"'); 

     //does the child have children? 
     if ($(child).children().length > 0) { 
       $output.append(',"children": ['); 
       createJsonOutput($(child)); 
       $output.append(']}'); 
     } else if (child.nodeName != 'TEXTAREA' && child.nodeName != 'SCRIPT') { 
       $output.append(', "value": "' + $(child).text() + '"}'); 
     } else { 
       $output.append('}'); 
     } 

     if ((idx + 1) < $childrenCnt) { 
      $output.append(','); 
     } 
     }); 
    }; 

    createJsonOutput($('html')); 

例（未格式化）JSON：

{"name": "HTML","children": [{"name": "HEAD","children": [{"name": "META", "value": ""},{"name": "TITLE", "value": "Node-Link Tree"},{"name": "SCRIPT"},{"name": "SCRIPT"},{"name": "LINK", "value": ""}]},{"name": "BODY","children": [{"name": "DIV","children": [{"name": "UL","children": [{"name": "LI", "value": "I"},{"name": "LI","children": [{"name": "UL","children": [{"name": "LI", "value": "A"},{"name": "LI","children": [{"name": "UL","children": [{"name": "LI", "value": "1"},{"name": "LI", "value": "2"},{"name": "LI", "value": "3"}]}]},{"name": "LI", "value": "C"}]}]},{"name": "LI", "value": "III"}]}]},{"name": "DIV","children": [{"name": "TEXTAREA"},{"name": "P", "value": "tree time!"}]},{"name": "DIV", "value": ""},{"name": "SCRIPT"}]}]} 

Answer 1

你可以寫一個函數返回只是當前元素的文字，

jQuery.fn.justtext = function() { 
    return $(this).clone() 
      .children() 
      .remove() 
      .end() 
      .text(); 
}; 

http://viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html

Answer 2

兒童（）只返回元件節點，但例如II在第二<li/>是一個文本節點。

您可以使用contents()相反，它也返回文本節點

Answer 3

我掀起的東西了，似乎你想要做什麼。

function objectify(node, recursing) { 
    var n, out = []; 

    if (node.shift && node.shift.call) { 
     while (n = node.shift()) { 
      out.push(objectify(n, true)); 
     } 
     return out; 
    } 

    n = {name: node.tagName}; 

    if (node.children && node.children.length) { 
     n.children = objectify(out.slice.call(node.children), true); 
    } else if (node.textContent) { 
     n.value = node.textContent; 
    } 

    return recursing ? n : JSON.stringify(n); 
} 

// test it 
console.log(objectify(document.getElementsByClassName('level-1')[0]));​ 

如果我理解你正確遇到的問題，這僅僅得到一個節點的文本內容，如果它有沒有孩子避開它。你可能可以將相同的東西應用到你的代碼中。

從您的UL例如上面運行輸出：

{"name":"UL","children":[{"name":"LI","value":"I"},{"name":"LI","children":[{"name":"UL","children":[{"name":"LI","value":"A"},{"name":"LI","children":[{"name":"UL","children":[{"name":"LI","value":"1"},{"name":"LI","value":"2"},{"name":"LI","value":"3"}]}]},{"name":"LI","value":"C"}]}]},{"name":"LI","value":"III"}]} 

這是否對你的工作？

http://jsfiddle.net/hCDjd/