Question

我的代码如下：

    <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>

现在在下面的代码中我试图更改位于同一列表中的 addMarkerBtn 的信息.... :(因为有多个列表具有相同的结构）

 $(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');
    }

尝试最近（），下一步（）但无法使其正常工作。任何帮助请...

Answer 1

parents

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

Answer 2

~~如果有多个div包含#compAddressSubmit，则您的文档无效。 id值必须才是唯一的。听起来像id compAddressSubmit的按钮应该将其作为一个类来代替。~~

~~假设你做了那个改变，那么：~~ （我发现你的问题已经改变了。）

所以：

$(document).on('click','.compAddressSubmit', function () {
    var addMarkerBtn = $(this).closest("div.companyAddressDiv").prev().find('.addMarkerBtn');
    addMarkerBtn.removeClass('btn-primary btn-warning').addClass('btn-success');
}

$(this).closest("div.companyAddressDiv")找到包含该按钮的companyAddressDiv。 prev转到上一个元素（其上方的div），然后find(".addMarkerBtn")找到该div内的按钮。

如果结构可能发生变化，div.companyAddressDiv之前的元素将不是您想要的元素，则可以使用.prevAll("div.input-prepend").first()代替div仅.prev()。

Answer 3

试试这个

var addMarkerBtn = $(this).parents().eq(2).find('.addMarkerBtn');

获取前一个div的元素

3 个答案: