CODEWITHSUNDEEP
jquery
FabricioG
FabricioG

Reputation: 3320

How to traverse to access sibling element with jquery

I have the following html:

<div class="tab-navigation" style="padding-bottom: 10px;">
    <button class="btn btn-solid navigate" value="1"> Previous </button>
    <button class="btn btn-solid navigate" value="3" id="Stock"> Next </button>
</div>
<div class="row justify-content-md-center el-selection vertical-align selectedBtnOption" data-type="Stock" data-id="8">
    <div class="col-md-3"> <img src="http://127.0.0.1:8000/storage/media/label-stock-white-bopp.svg" alt="" class="w-100 img-fluid blur-up image_zoom_cls-0 lazyloaded"> </div>
    <div class="col-md-6">
        <h6 class="product-title">White BOPP</h6>
        <button class="btn btn-outline btn-sm detailsToggle">Show me details</button>
    </div>
    <div class="col-md-3"> <img src="http://127.0.0.1:8000/assets/images/icon/popular.svg" alt="" class="w-100 img-fluid blur-up image_zoom_cls-0 lazyloaded"> </div>
</div>

this part repeats a few times with a different data-id:

<div class="row justify-content-md-center el-selection vertical-align selectedBtnOption" data-type="Stock" data-id="8">

When clicked I need to add a class to tab-navigation. This same setup appears a few times in the html so I couldn't just fin'd the class tab-navigation. How can I access this? I thought of closest but since it's not in a parent I wouldn't be able to get it.
Any idea how I could access it and add a class to it?

Upvotes: 0

Views: 24

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

Something like .prev() ?

$('.el-selection[data-id]').on('click', function(){
   $(this).prev('.tab-navigation').addClass('some-navigation-class');
});

Upvotes: 1

Related Questions