选择元素的父母之前的兄弟姐妹 - 遍历元素

时间：2017-06-05 20:56:34

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

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

生成的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-links应该在每次ajax调用后删除它们的活动类。

JS：

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

的Ajax：

 $.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");
});

评论后：// $（＆＃34; #orderResultTabs＆gt; li：last＆＃34;）。addClass（＆＃34; active＆＃34;）;

初始：

<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）仍然有效。这不应该。我放了一个＆＃34; **_**＆＃34;在活动类周围以及使用_**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>

最新的标签不应保持有效。一旦输出，选项卡应返回到正常的引导功能。

2 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

所以，答案是迭代所有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);
    }
});
相关问题
最新问题