如何在另一个元素之前找到第一个元素

Question

我需要获得一个具有无限子女可能性的元素的id。如果用户单击此（主要元素）中的每个元素，那么我现在需要main元素的id在该元素之前或之后插入新的div。

例

<div id="contentholder" data-ownid="100">
...
- add here a new div on click at each of the children from the main-element
<div id="999" data-ownid="1">
This is the main-element
   <div id="a" data-ownid="2"></div>
   <div id="b" data-ownid="3"><div><span id="d" data-ownid="5"></span></div></div>
   <div id="c" data-ownid="4"><img id="f" data-ownid="6"...><span id="g" data-ownid="7"></span></div>
   <img id="h" data-ownid="8"...>
</div>
- or add here a new div on click at each of the children from the main-element
...
</div>

我知道要添加新的div

$('#ID').before('<div>newdiv</div>');

和

$('#ID').after('<div>newdiv</div>'); //formatting

重要的是，div id = 999不是最后一个父级。它之前也是一个未知数量的元素的孩子。因此，我的搜索必须停在此div才能获得此ID。

也许它是一种在id = contentholder的div之前寻找最后一个父级的方法？内容持有者是该集合的最后一个父节点。

如何通过单击嵌套元素获取主元素的ID？

非常感谢。

Answer 1

如果你需要的元素有[id]s，你可以使用id选择器

$(document).on('click' , '*:not([id])' , function(e){
  e.stopPropagation();
  console.log($(this).closest('[id]').attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contentholder">
  <div id="888">
  This is the main-element
     <div></div>
     <div><div><span>Span</span></div></div>
     <div><img src=""/><span>Span</span></div>
     <img/>
  </div>
  <div id="999">
  This is the main-element
     <div></div>
     <div><div><span>Span</span></div></div>
     <div><img src=""/><span>Span</span></div>
     <img/>
  </div>
</div>

说明：

• [id]选择器选择具有id属性的元素
• e.stopPropagation防止事件冒泡DOM树，防止任何父处理程序被通知事件。
• *:not([id])选择所有元素，但不选择有id的元素

使用data属性更新代码

$(document).on('click' , '*:not([data-id])' , function(e){
  e.stopPropagation();
  console.log($(this).closest('[data-id]').attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contentholder">
  <div id="888" data-id>
  This is the main-element
     <div></div>
     <div><div><span>Span</span></div></div>
     <div><img src=""/><span>Span</span></div>
     <img/>
  </div>
  <div id="999" data-id>
  This is the main-element
     <div></div>
     <div><div><span>Span</span></div></div>
     <div><img src=""/><span>Span</span></div>
     <img/>
  </div>
</div>

请确保在添加新div时添加data-id属性

$('#ID').before('<div data-id>newdiv</div>');

这是没有id或data属性的工作原理

$(document).on('click' , '*:not(#contentholder > div)' , function(e){
  e.stopPropagation();
  $(this).attr('data-get-parent' , '');  // add data attribute to the clicked element
  console.log($('#contentholder > div:has([data-get-parent])').attr('id'));  // get id of the direct div of #contentholder which has the appended data attribute
  $('[data-get-parent]').removeAttr('data-get-parent'); // remove the data attribute
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contentholder">
  <div id="888">
  This is the main-element
     <div></div>
     <div><div><span>Span</span></div></div>
     <div><img src=""/><span>Span</span></div>
     <img/>
  </div>
  <div id="999">
  This is the main-element
     <div></div>
     <div><div><span>Span</span></div></div>
     <div><img src=""/><span>Span</span></div>
     <img/>
  </div>
</div>

说明：

• 选择中的>意味着直接的孩子
• :has() select元素有（元素）表达式$（“div：has（p）”）匹配一个if 存在于其后代中的任何地方，而不仅仅是直接的孩子。

Answer 2

我的建议是添加一些带有数据属性的标识符，例如data-parent="999"，然后在点击处理程序中使用click处理程序，使用var $parent = $(this).closest('[data-parent]');获取父元素。然后，您可以获得有关该元素的任何信息，并使用$('<div>I`m a freshly generated element</div>').insertAfter($parent);。

Answer 3

在@ Mohamed-Yousef提出了很好的建议后，我决定创建一个小型嵌套函数来循环元素直到结束。

这不需要添加和删除新的data-attr，并且可以在所有元素的每个consterlation中工作。

这里是：

function get_first(element)
  {
        function is_parent(element)
        {
              if($(element).parent().attr('id') !='contentholder')
              {     return is_parent('#'+$(element).parent().attr('id'));                         
              }else{      return res=$(element).attr('data-editor-id');   }
        }            
        return is_parent(element);
  }