如何使用jQuery获取所有元素的父元素？

Question

如何使用jQuery获取所有元素的父级？我想将这些父级保存在一个变量中，以便稍后用作选择器。例如：<div><a><img id="myImg"/></a></div>
GetParents('myImg'); 将返回 "div a" 等类似的结果。

- Amr Elgarhy

Answer 1

/// 获取所有元素的父级数组：

allParents = $("#myElement").parents("*")

/// 通过元素的父级获取嵌套选择器：

function GetParents(id) {
    var parents = $("#" + id).parents("*");
    var selector = "";
    for (var i = parents.length-1; i >= 0; i--) {
        selector += parents[i].tagName + " ";
    }

    selector += "#" + id;

    return selector;
}

GetParents('myImage') 将返回您的嵌套选择器: HTML BODY DIV A #myImage

不确定为什么您需要这个，但它可以作为可重用的选择器。

- dway

---

'#' + id 不安全。如果 "id" 包含 [] 或其他特殊字符（这些是合法的），这将无法正常工作。最好在此处使用 document.getElementById，或者至少正确转义它。 - mpen

Answer 2

您不需要获取它们的选择器，因为您随后可以直接使用jQuery。

如果您想稍后使用所有父元素，可以这样做：

var parents = $("#element").parents();
for(var i = 0; i < parents.length; i++){
  $(parents[i]).dosomething();
}

- Seb

Answer 3

每个元素都只有一个真实父级。要访问并保存它，请编写以下内容：

myParent = $("#myElement").parent();

如果您需要父元素的父元素，请使用 .parents()。

请参阅文档以获取更多信息：

http://docs.jquery.com/Traversing/parent#expr

http://docs.jquery.com/Traversing/parents#expr

- ericteubert

---

但是那个父级别还有自己的父级别，依此类推。 - cgp

Answer 4

您可以通过以下方式获取元素父级的所有标签：

var sParents = $('#myImg').parents('*').map(function() {                
      return this.tagName;
    }).get().join(' ');

你也可以将this.tagName替换为例如this.id或其他属性。

- Purefan

---

喜欢这个解决方案，会测试一下，看起来很聪明。 - Amr Elgarhy

Answer 5

你可以使用 parents() 方法获取当前元素的直接父级以及它们在 DOM 树中的所有祖先元素。你还可以传递一个选择器作为参数，只获取符合特定条件的父级元素。例如：

$('#myelement').parents('[id$=container]')

获取所有具有id属性且其值以文本“container”结尾的父元素

- digitaljoel