Question

我有功能：

 <script type="text/javascript">
    $(document).ready(function () {
        $('#myTab a').click(function (e) {
            e.preventDefault();
            if ($(this).attr('href') === ('#' + $('#myTabContent').children('div').attr('id'))) {
                alert($(this).attr('href'));
            }
        });
    });
</script>

和标记：

 <ul id="myTab" class="nav nav-tabs">
    <li><a href="#vergiSK" data-toggle="tab">
        </a></li>
    <li><a href="#spkSK" data-toggle="tab">
        </a></li>
    <li><a href="#hukukSK" data-toggle="tab">
       </a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade" id="vergiSK">
     <ul>
        <li></li>
        <li></li> 
     </ul>
   </div>
    <div class="tab-pane fade" id="spkSK">
      <ul>
        <li></li>
        <li></li> 
     </ul>
    </div>
    <div class="tab-pane fade" id="hukukSK">
      <ul>
        <li></li>
        <li></li> 
     </ul>
    </div>
 </div>

问题在于，当我点击“ a ”元素之一时，我只获得带有第一个ID的元素。如何才能获得所有匹配的“ href ”和“ id ”的值？

Answer 1

如果您尝试获取与您点击的锚相关的div，那么：

<script type="text/javascript">
    $(document).ready(function () {
        $('#myTab a').click(function (e) {
            var $div = $($(this).attr("href"));
            // Do something with the div
        });
    });
</script>

这是有效的，因为您使用的href（#vergiSK等）的值是有效的ID选择器，因此您可以将其直接传递到$()以获取jQuery包含该ID的元素周围的对象。请注意，我正在使用$(this).attr("href")获取href而非this.href，这将被展开（因此会有完整的网址，而不仅仅是{{1的实际内容）属性）。

Live Example（单击相应链接时会短暂地将div变为红色）| Source

但是如果由于其他原因你想要遍历href个孩子的元素，你可以使用each。

#tab-content

无法迭代Jquery中的元素

1 个答案: