Question

我需要获取一个元素ID，该ID具有无限子元素的可能性。如果用户单击了此元素（主元素）内的每个元素，那么我现在需要main-element的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]，则可以使用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()选择具有（element）的元素<$>“ $（” div：has（p）“）表达式匹配a

< em>存在于其子孙后代中的任何地方，而不仅仅是直接的孩子。

Answer 2

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

Answer 3

在@ Mohamed-Yousef的强烈建议下，我决定创建一个小小的嵌套函数以将元素循环到最后。

这不需要添加和删除新的数据属性，并且可以在所有包含所有元素的混乱中使用。

这里是：

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);
  }

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

3 个答案: