选择一个元素的父元素的前一个兄弟的子元素 - 遍历元素答案

【问题标题】：Selecting an element's parent's previous sibling's child - traversing elements选择一个元素的父元素的前一个兄弟的子元素 - 遍历元素
【发布时间】：2017-06-07 22:25:48
【问题描述】：

我知道标题有点占有欲，但我没有更好的方法来正确地用词。

生成的 HTML：

<ul class="nav nav-tabs" id="orderResultTabs" role="tablist">
      <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#5423788082" role="tab" aria-controls="home" aria-expanded="false">5423788082</a>
      </li>
      <li class="nav-item active">
            <a class="nav-link active" data-toggle="tab" href="#5424163999" role="tab" aria-controls="home" aria-expanded="false">5424163999</a>
      </li>
</ul>

我有一组在 ajax 调用后附加的引导选项卡。但是，每次通话后，我都希望将前一个选项卡设置为非活动状态。使最新的标签成为焦点。基本上所有以前的 a.nav 链接都应该在每次 ajax 调用后删除它们的活动类。

JS：

$("#orderResultTabs > li > a:last").parent().prevAll().siblings().find(".active").removeClass("active");
$("#orderResultTabs > li > a:last").addClass("active");

阿贾克斯：

 $.ajax({
        type: "POST",
        url: "orders",
        data: "order_id=" + orderID + "&flag=" + flag,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(data) {
            // var table = $("#orderOutput");
            var tabNav = $("#orderResultTabs");
            var tabContent = $('.tab-content');
            for (var i = data.length - 1; i >= 0; i--) {
                orderID = data[i].orders_id;
                orderLoop(i, data, tabNav, orderID, tabContent);
            }
            $('.loader').hide(); //hide loader
            $('.clear').show();
            $("#orderResultTabs > li > a:last").parent().prevAll().siblings().find(".active").removeClass("active");

            $("#orderResultTabs > li > a:last").addClass("active");
            $("input[type=orderID]").val("");
            $('#ordersOutput').show();

        },
        error: function(data) {
            alert('error');
            console.log(data);
        }
    });

orderLoop()

function orderLoop(i, data, tabNav, orderID, tabContent) {
    tabNav.append("<li class='nav-item'><a class='nav-link active' data-toggle='tab' href=#" + data[i].orders_id + " role='tab' aria-controls='home' aria-expanded='false'>" + data[i].orders_id + "</a></li>");

    for (var j = data.length - 1; j >= 0; j--) {
        tabContent.append("<div class='tab-pane fade' id=" + data[j].orders_id + " role='tabpanel'><div class='tab'><div class='col'><table class='table table-sm table-responsive' id='orderOutput'></table><form role='form'><button id='viewOrderItems' value='NO ORDER ID' type='button' class='btn btn-primary btn-sm btn-block'>View Order Items</button></form></div></div></div>");
        var table = $(".tab-pane#" + data[j].orders_id + " > .tab > .col > table");
        table.append("<tr><th>ADDRESS ID</th><td>" + data[j].address+ "</td></tr>");
        table.append("<tr><th>CURRENCY</th><td>" + data[j].currency + "</td></tr>");
        table.append("<tr><th>MEMBER ID</th><td>" + data[j].member+ "</td></tr>");
        table.append("<tr><th>STORE ID</th><td>" + data[j].store+ "</td></tr>");
        table.append("<tr><th>TIMEPLACED</th><td>" + moment(data[j].timeplaced).format("MMMM D, YYYY @ h:mm A") + "</td></tr>");
        table.append("<tr><th>TOTAL ADJUSTMENT</th><td>$" + data[j].adjust+ "</td></tr>");
        table.append("<tr><th>TOTAL PRODUCT</th><td>$" + data[j].prod+ "</td></tr>");
        table.append("<tr><th>TOTAL SHIPPING</th><td>$" + data[j].totalshipping + "</td></tr>");
        table.append("<tr><th>TOTAL TAX</th><td>$" + data[j].tax+ "</td></tr>");
        table.append("<tr><th>TOTAL SHIPPING TAX</th><td>$" + data[j].shiptax+ "</td></tr>");
        table.append("<tr><th>TYPE</th><td>" + data[j].type + "</td></tr>");
        var button = $(".tab-pane#" + data[j].orders_id + " > .tab > .col > form > button");
        button.val(data[i].orders_id);
        $('.nav-tabs a:last').tab('show');

    }
}

如果有人对如何执行此操作有任何想法，我很乐意听取您的意见。

根据@varlogtim 的建议：

<ul class="nav nav-tabs" id="orderResultTabs" role="tablist">
      <li class="nav-item active">
            <a class="nav-link" data-toggle="tab" href="#5423788082" role="tab" aria-controls="home" aria-expanded="false">5423788082</a>
            </li>
      <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#5424163999" role="tab" aria-controls="home" aria-expanded="false">5424163999</a>
      </li>
</ul>

当我单击时，列表项变为活动状态，显示选项卡内容，但导航链接保持非活动状态。我尝试了以下操作：

$(".nav-link").on("click", function() {
    $(this).addClass("active");
});

评论后： // $("#orderResultTabs > li:last").addClass("active");

首字母：

<div id="ordersOutput">
      <div role="tabpanel">
            <ul class="nav nav-tabs" id="orderResultTabs" role="tablist">
            </ul>
            <div class="tab-content clearfix">
            </div>
      </div>
</div>

第一次运行：

<div id="ordersOutput" style="display: block;">
      <div role="tabpanel">
            <ul class="nav nav-tabs" id="orderResultTabs" role="tablist">
                  <li class="nav-item"><a class="nav-link **active**" data-toggle="tab" href="#5423788082" role="tab" aria-controls="home" aria-expanded="false">5423788082</a></li>
            </ul>
            <div class="tab-content clearfix">
                  <div class="tab-pane **active**" id="5423788082" role="tabpanel">
                        <div class="tab">
                              <div class="col">
                                    <table class="table table-sm table-responsive" id="orderOutput">
                                    </table>
                                    <form role="form">
                                    </form>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</div>

第二次运行：

<div id="ordersOutput" style="display: block;">
      <div role="tabpanel">
            <ul class="nav nav-tabs" id="orderResultTabs" role="tablist">
                  <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#idAlpha" role="tab" aria-controls="home" aria-expanded="false">idAlpha</a></li>
                  <li class="nav-item"><a class="nav-link **active**" data-toggle="tab" href="#idBeta" role="tab" aria-controls="home" aria-expanded="false">idBeta</a></li>
            </ul>
            <div class="tab-content clearfix">
                  <div class="tab-pane" id="idAlpha" role="tabpanel">
                        <div class="tab">
                              <div class="col">
                                    <table class="table table-sm table-responsive" id="orderOutput">
                                    </table>
                                    <form role="form" lpformnum="2">
                                    </form>
                              </div>
                        </div>
                  </div>
                  <div class="tab-pane **active**" id="idBeta" role="tabpanel">
                        <div class="tab">
                              <div class="col">
                                    <table class="table table-sm table-responsive" id="orderOutput">
                                    </table>
                                    <form role="form">
                                    </form>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</div>

第二次运行后 - 当我点击第一个选项卡时：

请注意，即使我已激活/单击第一个选项卡 (#idAlpha) 的 (.nav-link)，第二个选项卡 (#idBeta) 的 (.nav-link) 仍然处于活动状态。这不应该。我在活动类周围放了一个“**_**”，而用：_**active**_ 指定的那个是问题所在。

<div id="ordersOutput" style="display: block;">
      <div role="tabpanel">
            <ul class="nav nav-tabs" id="orderResultTabs" role="tablist">
                  <li class="nav-item **active**"><a class="nav-link" data-toggle="tab" href="#idAlpha" role="tab" aria-controls="home" aria-expanded="false">idAlpha</a></li>
                  <li class="nav-item"><a class="nav-link _**active**_" data-toggle="tab" href="#idBeta" role="tab" aria-controls="home" aria-expanded="false">idBeta</a></li>
            </ul>
            <div class="tab-content clearfix">
                  <div class="tab-pane **active**" id="idAlpha" role="tabpanel">
                        <div class="tab">
                              <div class="col">
                                    <table class="table table-sm table-responsive" id="orderOutput">
                                    </table>
                                    <form role="form" lpformnum="2">
                                    </form>
                              </div>
                        </div>
                  </div>
                  <div class="tab-pane" id="idBeta" role="tabpanel">
                        <div class="tab">
                              <div class="col">
                                    <table class="table table-sm table-responsive" id="orderOutput">
                                    </table>
                                    <form role="form" lpformnum="3">
                                    </form>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</div>

最近的标签不应保持活动状态。输出后，选项卡应返回正常的引导功能。

【问题讨论】：

请包含附加元素的 AJAX 调用代码。似乎最容易做到；在 AJAX 成功后，使所有链接处于非活动状态，然后将新链接添加为活动。而不是添加新链接，然后使用复杂的父子选择器到处乱搞......
@varlogtim -- 我根据您的要求更新了 OP。 ajax 调用响应中的每个条目都会调用一个函数 orderLoop()。
看起来orderLoop() 函数实际上是将新的<li> 元素插入#orderResultTabs <ul> - 对吗？
你是对的。我将它添加到 OP。看看吧。
我想既然 nav-item 和 nav-link 都需要设置为活动状态，我必须遍历树（希望我说的没错）。

标签： jquery twitter-bootstrap-3 tree-traversal

【解决方案1】：

您应该首先从所有元素中删除活动类，然后将其分配给最后一个。

   $("#orderResultTabs > li > a").find(".active").removeClass("active");
    $("#orderResultTabs > li > a:last").addClass("active");

【讨论】：

【解决方案2】：

所以，答案是遍历所有 li > a 项目并删除“活动”类，然后将活动类设置在最后一个。

我注意到li 和a 都有活动标志，所以这可能会引起一些混乱。我的回答删除了 li 项目和 a 元素上的活动标志。

$.ajax({
    type: "POST",
    url: "orders",
    data: "order_id=" + orderID + "&flag=" + flag,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(data) {
        // var table = $("#orderOutput");
        var tabNav = $("#orderResultTabs");
        var tabContent = $('.tab-content');
        for (var i = data.length - 1; i >= 0; i--) {
            orderID = data[i].orders_id;
            orderLoop(i, data, tabNav, orderID, tabContent);
        }
        $('.loader').hide(); //hide loader
        $('.clear').show();

        // start fix
        $("#orderResultTabs > li").each(function() {
            $(this).removeClass("active");
            $(this).children("a").removeClass("active");
        });

        //$("#orderResultTabs > li:last").addClass("active");
        $("#orderResultTabs > li:last > a").addClass("active");
        // end fix


        $("input[type=orderID]").val("");
        $('#ordersOutput').show();

    },
    error: function(data) {
        alert('error');
        console.log(data);
    }
});

【讨论】：

你的修复对我有用。但是，当我单击任何其他选项卡时，它不会将其设置为活动状态。请参阅我对原始帖子的更新。谢谢你的帮助。我整天都被困在这上面。很高兴至少有这部分工作。
尝试注释掉$("#orderResultTabs > li:last").addClass("active"); ... 再次查看orderLoop() 函数，似乎当它添加li 时，它们不活动，但a 元素是活动的。
您的答案确实将活动标签添加到两者中，但是当我单击第一个选项卡或除最新选项卡以外的任何选项卡时，它会获得活动选项卡，但最近的选项卡也保持活动状态。我已将其添加到我的 OP 中，以突出显示每次 ajax 调用后发生的情况以及选项卡的行为。感谢您的帮助！