Question

我正在使用Bootstrap在单击树视图中的链接时创建选项卡。在单击时打开的每个选项卡中，还有两个名为Query Builder和Dimension Builder的选项卡。下面是使用jQuery创建的标记（只是其中的一部分）：

<div class="tab-pane active" id="1" role"tabpanel">
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist">
        <li role="presentation" class="active">
            <a role="tab" data-toggle="tab" href="#tab0" aria-controls="tab0">Query Builder</a>
        </li>
        <li role="presentation">
            <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Dimension Builder</a>
        </li>
    </ul>
    <div class="tab-content"></div>
</div>
<div class="tab-pane" id="2" role"tabpanel">
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist">
        <li role="presentation" class="active">
            <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Query Builder</a>
        </li>
        <li role="presentation">
            <a role="tab" data-toggle="tab" href="#tab2" aria-controls="tab2">Dimension Builder</a>
        </li>
    </ul>
    <div class="tab-content"></div>
</div>

为了能够在这些选项卡中拥有我的表单，一个用于查询生成器，一个用于维度生成器，并使每个表单在每个选项卡窗格中的每个选项卡中保持唯一，所有这些<a>标签都需要要拥有唯一的href和aria-controls属性，那么最后的数字必须是唯一的。因此，第一个<a>标记需要为数字0，下一个数字为1,2,3,4 ......等等。

我正在使用for循环遍历所有存在的<ul>，并且我正在尝试为每个<a>中的两个<ul>标记设置数字。以下是for循环：

    var contentUl = firstContentDiv.find(".query-dimension-tabs");      

    for (var i = 0; i < contentUl.length; i++) {      
        var qId = i;
        var dId = i + 1;        

        qA.href = "#tab" + qId;
        qA.setAttribute("aria-controls", "tab" + qId);
        dA.href = "#tab" + dId;
        dA.setAttribute("aria-controls", "tab" + dId);
    }

我尝试了很多不同的计算，但我总是以0 1 1 2 2 3结束，但是我希望它有0 1 2 3 4 5 ....有多少标签有这两个标签是

这有可能通过一些计算吗？

以下是点击两个链接时标签的照片：

Answer 1

这对你有用。

var qId = 0;
$(".query-dimension-tabs a").each(function(){
    $(this).attr("href","#tab"+qId);
    $(this).attr("aria-controls","tab"+qId);
    ++qId;
});

Answer 2

您真正需要做的是，不需要将for循环中变量 i 的值增加一个，而是需要将其递增2 。

所以不是这个

for (var i = 0; i < contentUl.length; i++)

这样做

for (var i = 0; i < contentUl.length; i+=2)

这样，每次你的循环开始， qId 将得到值得到i的值（0,2,4,6等）和 dId wil得到大于i的值1（1,3,5,7等）。因此，您将获得qId，dId对的值为0 1,2,3,4等等。

所以你的最终for循环将如下所示：

for (var i = 0; i < contentUl.length; i+= 2) {      
    var qId = i;
    var dId = i + 1;        

    qA.href = "#tab" + qId;
    qA.setAttribute("aria-controls", "tab" + qId);
    dA.href = "#tab" + dId;
    dA.setAttribute("aria-controls", "tab" + dId);
}

此外，如果您需要使用相同的类或ID 更改所有元素的值，则必须使用 each（）函数而不是 for loop 并使用 $（this）.attr（）更改polamoros所声明的值。

jQuery / Javascript使用for循环

2 个答案: