在 jQuery 中对 parent 的兄弟姐妹采取行动

Question

这是我的 html 代码：

<div class="btn-group js_publish_management>
    <button class="btn btn-danger js_publish_btn">Not Published</button>
    <button class="btn btn-success js_publish_btn">Published</button>
    <button type="button" t-attf-class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#" class="js_publish_btn">
                <span class="css_unpublish">Unpublish</span>
                <span class="css_publish">Publish</span>
            </a>
        </li>
    </ul>
</div>

现在我想 select parent 的兄弟按钮使用 jQuery。

如果我点击 li 元素的任何 <span> 那么我该如何对 <button> 执行某些操作我不太了解 jQuery select 或者。在此先感谢您的帮助。

相关演示JsFiddle

在上面的演示中，如果用户点击否按钮，它将变为 'loading...' 我想要这样：用户从下拉菜单中点击 NO-2 然后 NO 按钮也应该变成 'loading'

Answer 1

我认为这样的方法可行：

$("li span").click(function() {
   if ($(this).hasClass("css_unpublish")) {
       var buttons = $(this).closest(".btn-group").find("button.classForPublish");
   } else {
       var buttons = $(this).closest(".btn-group").find("button.classForUnpublish");
   }
})

Answer 2

假设您也可以更改 HTML，有很多更好的方法来同步按钮对。用 data- 属性装饰它们可能是使代码数据驱动的最简单方法。

您的 JSFiddle 有一些 奇怪的 代码。 文档就绪 事件仅适用于初始页面加载，而您似乎正在使用它来模拟使用循环的加载（这将不起作用，因为它将在同一浏览器框架上完成） .此外，文档加载没有 return 承诺，因此 .then 只会导致错误。

我用 loadData 函数替换了负载模拟，该函数执行 return 和 promise 并在 3 秒后完成。

我修改了您的代码，使各个按钮都有一个 data-target 来指代它们的匹配按钮（在下拉菜单中，或主按钮中）。

例如

<button id="Unpublish" data-target="#UnpublishLink" class="btn btn-danger js_publish_btn">No</button>

单击按钮时，它会创建一个 jQuery 对象，引用单击的按钮和匹配对：

// Add any matching button
$el = $el.add($el.data('target'));

然后它会在两个按钮上执行任何按钮登录（"loading..." 等）。

$el.button('loading');
loadData().then(function (result) {
    $el.toggleClass("css_unpublished css_published");
    $el.button('reset');
}).fail(function (err, data) {
    $el.button('reset');
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/deC37/312/

在 jQuery 中对 parent 的兄弟姐妹采取行动

action on parent's sibling in jQuery

javascript

jquery

jquery-selectors