在 jQuery 中获取像我这样的所有元素？

Posted 2023-03-05

【中文标题】在 jQuery 中获取像我这样的所有元素？

【英文标题】：Get all elements like myself in jQuery?

【发布时间】：2013-02-09 16:10:57

【问题描述】：

假设我有这个结构（没有类，没有 ID）： - 这是一个位置查找问题

d[0,1,2] 是纯 divs 。没有类没有id。

div (d0) 包装了一个重复结构，例如：

假设我有$(this) 作为第一个 d1

有没有遍历函数、方法、解决方案可以得到另外2个d1？ （或全部d1's。没关系..）

我会用文字来赞美它：

我是$(this)=d1。我有一个父母（这是d2，可以更多......这只是我的样本），它有一个父母 (d3)，因此，我还有 2 个像我一样的元素。

我怎样才能得到它们？ JSBIN

编辑

也许我不清楚，但我不必知道结构。我只有$(this)，它应该自己找到与d0相关的其他双胞胎（与其位置相同）

所以应该是这样的：

function getLikeMyself(objWhichIsThis , contextDivElement)



execute : getLikeMyself(theDivWhishIsThis, divElemtnWhichIs_d0)

【问题讨论】：

你应该说：我可能有X个父母。

@Jack 没关系，因为我提供的上下文 div 是contextDivElement，所以我，作为...的孩子的孩子，应该根据这个contextDivElement 寻找我的位置。 （当然也能找到像我这样的双胞胎）

不，首先你说“我有父母 d2 和 d3”，然后你说你不必知道结构，即可能有更多父母（或更少）。

@Jack 你是对的。我会加强它。（编辑：在引用中添加）。

如何确定起始$(this) 对象？还是所有元素都应该尝试找到所有其他与自己相似的元素？

【参考方案1】：

这是我的新尝试，.me() 方法将返回当前元素的选择器，直到 body。

$.fn.me = function()
  return this.first().parentsUntil("body").andSelf().map(function()
    return this.tagName;
  ).get().join(">");
;

用法：

var selector = $(this).me();
var $twins = $(selector);

See it here.

---

接受根元素作为参数的替代版本：

$.fn.me = function(root)
  return this.first().parentsUntil(root).andSelf().map(function()
    return this.tagName;
  ).get().join(">");
;

用法：

var selector = $(this).me("#root");
var $twins = $(selector, "#root");

See it here.

---

第三个版本保持根元素下最顶层元素的后代的相对位置。例如，它将返回 DIV>DIV:nth-child(1)>SPAN:nth-child(2) 而不是通用的 DIV>DIV>SPAN 选择器。

$.fn.me = function(root)
  return this.first().parentsUntil(root).andSelf().map(function()
    var eq = i ? ":nth-child(" + ($(this).index() + 1) + ")" : "";
    return this.tagName + eq;
  ).get().join(">");
;

用法：

var selector = $(this).me("#root");
var $twins = $(selector, "#root");

【讨论】：

也许我不清楚，但我不必知道结构（否则会很容易）。我只有 $(this)，它应该自己找到与d0相关的其他双胞胎@

@RoyiNamir，你说得很好，你需要自己做

这是一个相当不错的插件。 +1

缺少关卡。已更新。

@RoyiNamir，you can try something along these lines。这只能通过定义一个根元素来实现，即使可能存在极端情况

【参考方案2】：

您可以遍历每个父节点并下降到它们对应的兄弟节点，使用在下降过程中建立的路径：

var chain = [$('#imthis').prop('nodeName')];

$('#imthis')
  .parentsUntil('body')
  .each(function() 
    // i'm a parent
    $(this).siblings()
      .find(chain.join('>'))
    .each(function() 
      alert(this.textContent);
    );
    chain.unshift(this.nodeName);
  );

Demo

【讨论】：

也许我不清楚，但我不必知道结构（否则会很容易）。我只有 $(this) ，它应该自己找到与d0相关的其他双胞胎@

【参考方案3】：

您可以使用递归函数来“冒泡”DOM，直到到达 body 元素，然后反转这棵树并将其用作选择器。有点像：

function getChain(el)

    var parents = arguments[1] || [el.nodeName.toLowerCase()];

    if (el.parentNode.nodeName != 'BODY')

        parents.push(el.parentNode.nodeName.toLowerCase());
        el = el.parentNode;

        return getChain(el, parents);

     else 

        return parents.reverse().join('>');

    

见a demo fiddle

【讨论】：

我看你不太喜欢 jsbin...:-)