如何识别在哪个div中单击了哪个按钮？

Question

I have coded a div section which contains a button(Select Equipment).There can be many number of the same div containing the same button. I want to identify which button is clicked and change the status from open to complete of that particular div section.

HTML

<div class="pad col-xs-12 col-sm-12 col-md-12 pern alert"> 
    <div class="pad col-xs-12 col-md-6">
        <h4 id="frname"></h4>
    </div>
    <div class="pad col-md-5">
        <span class="next-step"><button class="ret_but butt label label-primary" id="equipment" name="equipment" type="button" OnClick='change();'>Select Equipment</button></span>
        <div class="status">
            <b>Status</b>
            <i class="open" id="open">Open</i>
        </div>
    </div>
    <div class="pad col-md-1">
        <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button>
    </div>
</div>

JavaScript

<script>
function change() {
    var $active = $('.wizard .nav-tabs li.active');
    $active.next().removeClass('disabled');
    nextTab($active);
    $("div.pen").find('.open').attr("class","complete");
    $("i.complete").html("Complete");
}
</script>

Answer 1

Try this snippet.

 $('.select-eq').click(function(){ $(this).parent('span').next('div.status').children('i').html("completed"); $(this).attr('disabled', true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pad col-xs-12 col-sm-12 col-md-12 pern alert"> <div class="pad col-xs-12 col-md-6"> <h4 id="frname"></h4> </div> <div class="pad col-md-5"> <span class="next-step"><button class="ret_but butt label label-primary select-eq" id="equipment" name="equipment" type="button">Select Equipment</button></span> <div class="status"> <b>Status</b> <i class="open" id="open">Open</i> </div> </div> <div class="pad col-md-1"> <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button> </div> </div> <div class="pad col-xs-12 col-sm-12 col-md-12 pern alert"> <div class="pad col-xs-12 col-md-6"> <h4 id="frname"></h4> </div> <div class="pad col-md-5"> <span class="next-step"><button class="ret_but butt label label-primary select-eq" id="equipment" name="equipment" type="button">Select Equipment</button></span> <div class="status"> <b>Status</b> <i class="open" id="open">Open</i> </div> </div> <div class="pad col-md-1"> <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button> </div> </div> 

Answer 2

    <div class="pad col-md-5">
                    <span class="next-step"><button class="ret_but butt label label-primary" name="equipment" type="button">Select Equipment</button></span>
                    <div class="status">
                                <b>Status</b>
                                <i class="open">Open</i>

                    </div>
            </div>
<div class="pad col-md-5">
                    <span class="next-step"><button class="ret_but butt label label-primary" name="equipment" type="button">Select Equipment</button></span>
                    <div class="status">
                                <b>Status</b>
                                <i class="open">Open</i>

                    </div>
            </div><div class="pad col-md-5">
                    <span class="next-step"><button class="ret_but butt label label-primary" name="equipment" type="button">Select Equipment</button></span>
                    <div class="status">
                                <b>Status</b>
                                <i class="open">Open</i>

                    </div>
            </div>

    $('[name=equipment]').on('click', function(){
      $(this).parents().siblings('div.status').find('i').html('Complete');
    });

https://jsfiddle.net/uh9s5Lj0/

Answer 3

Look below code hope it could help. Here i put multiple div, on each div there are buttons. I captured the button click and did the action on that button.

 function change(button) { //do your stuff here console.log(button.data("id")); button.parent().parent().find('i').text(' complete '+ button.data("id")); /*var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); $("div.pen").find('.open').attr("class", "complete"); $("i.complete").html("Complete");*/ } $('button.ret_but').on('click',function(){ change($(this)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pad col-xs-12 col-sm-12 col-md-12 pern alert"> <div class="pad col-xs-12 col-md-6"> <h4 id="frname"></h4> </div> <div class="pad col-md-5"> <span class="next-step"><button class="ret_but butt label label-primary" id="equipment" name="equipment" type="button" data-id="1">Select Equipment</button></span> <div class="status"> <b>Status</b><i class="open" id="open">Open</i> </div> </div> <div class="pad col-md-5"> <span class="next-step"><button class="ret_but butt label label-primary" id="equipment" name="equipment" type="button" data-id="2">Select Equipment</button></span> <div class="status"> <b>Status</b><i class="open" id="open">Open</i> </div> </div> <div class="pad col-md-5"> <span class="next-step"><button class="ret_but butt label label-primary" id="equipment" name="equipment" type="button" data-id="3">Select Equipment</button></span> <div class="status"> <b>Status</b><i class="open" id="open">Open</i> </div> </div> <div class="pad col-md-1"> <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button> </div> </div> 

Answer 4

You can identify the clicked section by retrieving the parent element of the clicked button. See the working solution https://jsfiddle.net/mp4o5z3u/

Snippet

<body>
  <div class="test">
    <button class='btn'>click me</button>
    <i class="open">Open</i>
  </div>

  <div class="test">
    <button class='btn'>click me</button>
    <i class="open">Open</i>
  </div>
</body>

Javascript:

$(function(){
$('.btn').click(function(){
 var divClicked = $(this).parent();
 divClicked.find('i.open').attr('class', 'complete').html('Complete');
})
})