Javascript获得X没有jQuery的父节点

我手动从一些网站抓取数据只是使用“Javascript :;”在浏览器的地址栏中输入。这比复制/粘贴更容易。Javascript获得X没有jQuery的父节点

我遇到了一些我必须做的实例：object.parentNode.parentNode .... 获取一些信息，因为它随站点而异，它可能在任何级别。

很显然，我不想要一个循环并遍历它，因为这会使一个简单的任务多一点广泛。

有没有办法说：object.parentNode [4]或类似的东西，如没有jQuery？

2013-12-13 Craig Stewart

我不认为你会设法避免一个良好的醇”循环：

for(var i=0; i<4 && node.parentNode; node=node.parentNode, i++); alert(node);

来源

2013-12-13 21:02:37

唉，我认为你是对的。谷歌没有太多的帮助，认为他们可能是一个在IE中没有标准的方法（因为它是如此符合:-)。 –

你可以看一下'document.querySelector（）'，也许你可以直接匹配父对象，而不需要去父节点。 –

我写了一个函数来做到的正是这种香草的JavaScript：

https://github.com/ryanpcmcquen/queryparent

这里的es5版本：

https://github.com/ryanpcmcquen/queryparent/blob/master/index-es5.js

或者，如果你只需要支持现代浏览器，你可以使用ES6版本：

https://github.com/ryanpcmcquen/queryparent/blob/master/index.js

你叫它像这样：

queryParent(SELECTOR, PARENT);

它将返回原始的JavaScript节点。

下面是它让你想确切类选择，即使是相同的选择另一个元素（你不会想）演示：

https://jsfiddle.net/ryanpcmcquen/zkw0gdj7/

/*! queryParent.js v1.2.1 by ryanpcmcquen */ 
 
/*global module*/ 
 
/*jshint esversion:6*/ 
 

 
const d = document; 
 
const qu = 'querySelector'; 
 

 
const queryParent = (s, p) => { 
 
    const q = (x) => d[qu](x); 
 
    const qa = (y) => d[`${qu}All`](y); 
 
    const pa = qa(p); 
 
    (typeof s === 'string') && (s = q(s)); 
 
    return [...pa].filter((n) => { 
 
    return (n.contains(s)) ? n : false; 
 
    }).pop(); 
 
}; 
 

 
//module.exports = queryParent; 
 

 
console.log(
 
    queryParent('.bar', '.foo') 
 
); 
 

 
// PSST! Check the console!

<div> 
 
    <ul class="foo"> 
 
    But there is also a <code>foo</code> we don't want here. 
 
    </ul> 
 
    <ul class="foo"> 
 
    The <code>foo</code> we want is here. 
 
    <li> 
 
     <ul> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <ul> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <ul> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <ul> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <ul> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul></ul> 
 
     </li> 
 
     <li> 
 
      <ul class="bar"><code>bar</code> is here.</ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

我觉得这个更有用的原因是它不依赖于一定数量的.parent()调用（或者相反，纯JS中的.parentNode）。因为这个原因，它会使你的代码更具前瞻性，如果标记结构发生变化，就不太可能停止工作。

来源

2016-10-28 16:18:04 ryanpcmcquen

Javascript获得X没有jQuery的父节点

回答

相关问题