Question

我正在使用制表符使用bootstrap。我正在做一个嵌套选项卡，它现在支持多个级别的选项卡，但我想将<i></i>附加到与tab-pane对应的所有导航列表中，如何在其中包含tab-gorup。以下我解释得更好。

以下是我所拥有的一个基本示例，该解决方案应尽可能在多个级别上运行：

<div class="tab-group">
    <!-- Tab Links -->
    <ul class="nl-nav">
        <li><a href="#001" data-toggle="pill">link 1</a></li>
        <li><a href="#002" data-toggle="pill">link 2</a></li>
        <li><a href="#003" data-toggle="pill">link 3</a></li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content">
        <div class="tab-pane" id="001">Nothing</div>
        <div class="tab-pane" id="002">Nothing</div>
        <div class="tab-pane" id="003">


                <!-- NESTED TAB -->
                <div class="tab-group">
                    <!-- Tab Links -->
                    <ul class="nl-nav">
                        <li><a href="#004" data-toggle="pill">link 1</a></li>
                        <li><a href="#005" data-toggle="pill">link 2</a></li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content">
                        <div class="tab-pane" id="004">Nothing</div>
                        <div class="tab-pane" id="005">Nothing</div>
                    </div>
                </div>
                <!-- END NESTED TAB -->

        </div>
    </div>
</div>

想法

正如您在第一个.tab-group .tab-content > .tab-pane中看到的，您可以发现id="003"内部还有.tab-group。

现在在第一个.tab-group .nl-nav我必须找到<li>个元素与a的链接#003并在该链接后添加<i></i> ：

示例：

<ul class="nl-nav">
    <li><a href="#001" data-toggle="pill">link 1</a></li>
    <li><a href="#002" data-toggle="pill">link 2</a></li>
    <li><a href="#003" data-toggle="pill">link 3<i></i></a></li> <!-- Appended -->
</ul>

我必须对所有.nl-nav > .li重复或做同样的事情，这些.tab-content .tab-pane可以在嵌套标签的标签组内找到，对应于他们自己的{{1}}内容

Answer 1

您可以使用filter()：

$('.nl-nav a').filter(function() {
  return $(this.hash).find('.tab-group').length;
}).append('<i class="icon-class">')

.icon-class:after {
  content: '... ICON';
  color: red;
}
.tab-content{
   padding-left:80px
}
.tab-pane .tab-group{
  margin-left:50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-group">
  <!-- Tab Links -->
  <ul class="nl-nav">
    <li><a href="#001" data-toggle="pill">link 1</a></li>
    <li><a href="#002" data-toggle="pill">link 2</a></li>
    <li><a href="#003" data-toggle="pill">link 3</a></li>
  </ul>

  <!-- Tab Content -->
  <div class="tab-content">
    <div class="tab-pane" id="001">Nothing</div>
    <div class="tab-pane" id="002">Nothing</div>
    <div class="tab-pane" id="003">

      <!-- NESTED TAB -->
      <div class="tab-group">
      Nested tabs
        <!-- Tab Links -->
        <ul class="nl-nav">
          <li><a href="#004" data-toggle="pill">link 1</a></li>
          <li><a href="#005" data-toggle="pill">link 2</a></li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content">
          <div class="tab-pane" id="004">Nothing</div>
          <div class="tab-pane" id="005">
            <!-- NESTED TAB -->
            <div class="tab-group">
            Nested tabs
            </div>
          </div>


        </div>


      </div>
    </div>

  </div>
</div>
</div>

Answer 2

如果我理解正确，您可以选择每个ul并循环浏览它们。它看起来像这样：

var nlnavs = $("ul[class=nl-nav]");
for(var i = 0; i < nlnavs.length; i++){
  var childs = $(nlnavs[i]).children();
  for (var j = 0; j < childs.length; j++){
   $(childs[j]).append("<i>YOUR ICON</i>");
  }
}

这是一个有效的JSFiddle

如果<a></a>具有使用jQuery或JS的特定锚点，则将其附加到{{3}}

2 个答案: