如何通过单击子ID找到父ID，然后通过jQuery获取父ID来找到子ID

Question

I am creating commenting module on product page in which i am showing option of spam comment and there i am showing onclick show and hide popup. now it is working fine in single comment but when comment is two it opens both on one time because the class is same. Now that's why i want to get the parent li id so we can find only the internal class of that id not the another one

Here is my jsfiddle link

this is my script

$(".slidermenudown .fa-angle-down").on("click",function(){

 if($(".anthr_usr_cmnt").hasClass("active")){

    $(".anthr_usr_cmnt").removeClass("active");

  }else{
    if($(".owner_cmnt").hasClass("active")){
      $(".owner_cmnt").removeClass("active");
    }
    $(".anthr_usr_cmnt").addClass("active");
  }

});

Answer 1

Try this:

JS

$(".slidermenudown .fa-angle-down").on("click",function(){
    var parentli = $(this).parents('li').attr("id");
    var thisBox = $("#"+parentli).children().find(".anthr_usr_cmnt");
    if(thisBox.hasClass("active")){
        thisBox.removeClass("active");
    }else{
        $(".anthr_usr_cmnt.active").removeClass("active");
        thisBox.addClass("active");
    }
});

CSS

.active{
   display:block;  
 }

Answer 2

Use $(this) to refer to the event's target object.

From there, you can do $(this).find('.some-child-object') or $(this).parents('.some-ancestor') or even $(this).sibblings('div') etc.

$(".slidermenudown .fa-angle-down").on("click",function() {
    var $this = $(this); // "this" is the click's target. 
    var $anthr = $this.find(".anthr_usr_cmnt");
    var $owner = $this.find(".owner_cmnt");

    if ($anthr.hasClass("active")) {
        $anthr.removeClass("active");
    }
    else {
        if ($owner.hasClass("active")) {
            $owner.removeClass("active");
        }
        $anthr.addClass("active");
    }
});

Answer 3

Try this , I have modified your fiddle itself and your css also.

https://jsfiddle.net/Lse3s3uv/3/

 .active{ display:block; } 

  $(".slidermenudown .fa-angle-down").on("click", function() { var $this = $(this).parents('.comment'); // "this" is the click's target. console.log($this); var $anthr = $this.find(".anthr_usr_cmnt"); console.log($anthr); var $owner = $this.find(".owner_cmnt"); console.log($owner); if ($anthr.hasClass("active")) { $anthr.removeClass("active"); } else { if ($owner.hasClass("active")) { $owner.removeClass("active"); } //to remove hide others $('.anthr_usr_cmnt').removeClass('active'); $anthr.addClass("active"); } });