jQuery

Question

我正在解析 DOM，我想 提取与特定选择器匹配的所有元素的层次结构 ，让我们说 $('[data-node]') 到 JavaScript 对象树结构。我没能找到一个标准的 jQuery 方法来做到这一点。使用 jQuery.find() 似乎 return 一个平面列表。也许我只是错过了一些明显的东西？

例如，我想解析这个：

<div data-node="root">
   <div class="insignificant-presentation">
        <div>
            <div data-node="interestingItem">
            </div>
        </div>
    <div>
    <div data-node="anotherInterestingItem">
        <div data-node="usefulItem">
        </div>
    </div>
</div>

并在 JavaScript 中创建一个结构，如下所示：

[
  {
    "node": "root",
    "children": [
      {
        "node": "interestingItem",
        "children": []
      },
      {
        "node": "anotherInterestingItem",
        "children": [
          {
            "node": "usefulItem",
            "children": []
          }
        ]
      }
    ]
  }
]

Answer 1

不确定你为什么需要这个，但像这样的东西应该可以做到

$.fn.tree = function() {
    var arr  = [],
        self = this;

    (function runForrestRun(el, arr) {
        var isEl = self.is(el),
            children = [];

        if (isEl)
            arr.push({
                "node" : el.data('node'), 
                "children": children
            });

        el.children().each(function() {
            runForrestRun($(this), isEl ? children : arr);
        });

    }(this.first(), arr));

    return arr;
}

FIDDLE

Answer 2

function createTree(root) {
  var children = [];

  root.find('div[data-node]').each(function() {
    // I can't think of a better way to not match the same ellement twice. 
    if (!$(this).data('tagged')) {
      $(this).data('tagged', true);
      children.push(createTree($(this)));
    }
  });

  return {
    "node": root.data('node'),
    "children": children
  };
}

var tree = createTree($('div[data-node]').first());

document.write('<pre>' + JSON.stringify([tree], 0, 2))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-node="root">
  <div class="insignificant-presentation">
    <div>
      <div data-node="interestingItem">
      </div>
    </div>
    <div>
      <div data-node="anotherInterestingItem">
        <div data-node="usefulItem">
        </div>
      </div>
    </div>
  </div>
</div>

jQuery - 解析 DOM 并创建树结构（复合模式）

jQuery - Parse DOM and create a tree structure (composite pattern)

javascript

composite