JavaScript 从非结束节点 HTML 元素(例如 LI 元素)获取文本值

Question

我正在尝试编写一个脚本，该脚本将遍历 HTML 源并创建 DOM 的 JSON 文件，然后使用 d3.js 在 TreeView 中显示该文件。我遇到的问题是不仅希望显示元素(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>   

从我下面的函数来看，这一行适用于终端节点，但我无法弄清楚如何在不打印每个 child 的所有内容的情况下为 parent 做到这一点。

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

我尝试了 jQuery 的一些第一个子项，但无法让它工作。我还想让它尽可能通用，以适应任何 html 源。换句话说，我不想说 if (nodeName = 'LI') then -do list item certain 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