How to change visible button in div?

Question

Hello guys I have some code:

<div class="a">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>
<div class="b">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>

When i use $("button.btn.approve").addClass("disabled"); the buttons from div a and div b are disabled. How to disabled button-approve only from div a?

Answer 1

If you click the button, you only want to add class to the buttons in the same group?

If so do this:

 $('.btn-group .btn').click(function(){ $(this).parent().children('.btn').addClass('disabled'); }); 

 .disabled { color: #bbb; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="a"> <div class="btn-group"> <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button> <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button> <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button> </div> </div> <div class="b"> <div class="btn-group"> <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button> <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button> <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button> </div> </div> 

Answer 2

通过更新选择器，仅div内的选择按钮具有a类。

$("div.a button.btn.approve").addClass("disabled");

Answer 3

您只需要更改选择器并使之更加通用即可包含.a类：

$(".a > .btn-group > button.btn.approve").addClass("disabled");`

Answer 4

尝试这样的事情：

 $(".a button.btn.approve").addClass("disabled");

Answer 5

.b>.button.btn.approve

You need to define exact element because

button.btn.approve

Matches all buttons, you can add additional class or ID too