从父 ID 拆分并显示子 ID

Question

I have a div with ID as "parentID" to the parent div and based on this, I am dynamically adding "ChildID" to all its child divs along with its "parentID".

 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>

How can I get all child element IDs without parent div IDs? like below onClicking of Split tag...

Parent ID : parentID
Parent Child ID : parentIDChildID
Child ID only : ChildID ( This is what I am expecting )

Fiddle

Answer 1

Don't know what exactly is purpose of what you are asking, but you can replace your js code in your fiddle with this and it works as you expected. * Mind that, when you use attr function to set a property it is returning Object, not only string label. * If you will give multiple children the same id it will not work, because in html code ids need to be unique

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, ''));  

});

If you have some more questions, go on and ask.