Question

I have below code:

    <ul>
    <li id="1">same html structure as below...</li>
    .....
    <li id="42">
    <div class="input-prepend">
       <button class="btn btn-small companyListBtn addMarkerBtn btn-primary btn-warning" type="button">   </button>                                                                                   
       <input class="input-medium companyListInput" maxlength="60" type="text"/>
       <button class="companyListBtn editCompanyBtn" type="button"></button>
    </div>
    <div id="42Div" class="companyAddressDiv">
       <input type="text" id="test" class="companyAddress" placeholder="Enter the Address"/>
       <button  class="btn btn-small compAddressSubmit" style="height:30px;margin-top:-9px;" type="button"></button>
    </div>
    </li>
    </ul>

Now in the below code i am trying to change the information on the addMarkerBtn located within the same list…. :(because there are multiple lists with same structure)

 $(document).on('click','.compAddressSubmit', function () {
    var addMarkerBtn = $(this).prev("div.row").find('.addMarkerBtn');
    //wanna make changes to the addMarkerButton .. something like..
    addMarkerBtn.removeClass('btn-primary btn-warning').addClass('btn-success');
    }

Tried closest(), next() but couldnt get it work. Any help please…

Answer 1

parents

 var addMarkerBtn = $(this).parents("li").find('.addMarkerBtn');