0

我有这个功能，它返回我的路径el。但是，有时此功能会添加页面上不存在的元素。在这种情况下：

<table>
<tr><td></td><tr>
</table>

td 的路径看起来像table > tbody > tr > td。这个功能有什么问题？

function getDomPath(el) {
        element = el;
        if (!(el instanceof Element)) return;
        var path = [];
        while (el.nodeType === Node.ELEMENT_NODE &&  el.id != "jobs") {
            var selector = el.nodeName.toLowerCase();
            if (el.id) {
                selector += '#' + el.id;
            }
            else if(el.className){
                console.log(el.className);
                selector += '.' + el.className;
            }
            else {
                var sib = el, nth = 1, count = 1;
                while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling)  && nth++){
                    console.log(Node.ELEMENT_NODE)
                    console.log(el.previousSibling);
                    console.log(el);
                    count += $(el).prevAll().size();
                };
                selector += ":nth-child("+count+")";
            }
            path.unshift(selector);
            el = el.parentNode;
        }
        return path.join(" > ");
    };
4

2 回答 2

3

如果问题出在tbody元素上，您需要知道添加它的不是您的函数，而是浏览器本身。使用 Firebug 或 chrome 中的 Web Developer 工具查看您的页面。

看看这个 SO 答案。

于 2013-10-28T09:42:39.560 回答
1

该功能没有问题，它正确使用了所有确实存在的元素。

一个table元素总是有一个tbody元素，如果它有任何行。tbody即使您在标记中没有任何标签，浏览器也会添加该元素。

浏览器将创建完整的元素，即使您的标记不完整或遗漏了可选标签。例如，浏览器会在你的表中创建两行，因为你使用<td>而不是</td>当你试图结束第一行时。它将隐式结束第一行，开始新行，并隐式结束。表格中的元素最终将就像您将标记编写为：

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>
于 2013-10-28T09:49:12.450 回答