javascript - 从父 ID 拆分并显示子 ID

Question

我有一个 div，其父 div 的 ID 为“parentID”，基于此，我动态地将“ChildID”及其“parentID”添加到其所有子 div。

jQuery(document).on('click', '.split-id', function() {
  var parentID = jQuery('.parent').attr('id');
  var childID = jQuery('.child').attr('id', jQuery(this).closest('.parent').attr('id') + 'ChildID');

  jQuery('#displayParentID').html('Parent ID : ' + parentID);
  jQuery('#displayParentChildID').html('Parent Child ID : ' + childID);
  jQuery('#displayOnlyChildID').html('Child ID only : ' + childID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent" id="parentID">
  <div class="child"></div>
  <div class="child"></div>
</div>

<div id="displayParentID"></div>
<div id="displayParentChildID"></div>
<div id="displayOnlyChildID"></div>

<a href="javascript:;" class="split-id">Split</a>

如何获取没有父 div ID 的所有子元素 ID？就像下面点击 Split 标签...

父ID:parentID
父子 ID : parentIDChildID
仅 child ID:ChildID(这是我所期待的)

Fiddle

Answer 1

不知道你问的到底是什么目的，但你可以用这个替换你的 fiddle 中的 js 代码，它会按你预期的那样工作。* 请注意，当您使用 attr 函数设置属性时，它返回的是对象，而不仅仅是字符串标签。* 如果你给多个 child 相同的 id 是行不通的，因为在 html 代码中 id 需要是唯一的

jQuery(document).on('click', '.split-id', function () { 

  var parentID = jQuery('.parent').attr('id');
  var childElement = jQuery('.child').attr('id', parentID + 'ChildID');
  var childID = childElement.attr('id');
  jQuery('#displayParentID').html('Parent ID : ' + parentID);
  jQuery('#displayParentChildID').html('Parent Child ID : ' + childID);
  jQuery('#displayOnlyChildID').html('Child ID only : ' + childID.replace(parentID, ''));  

});

如果您还有其他问题，请继续提问。