无法遍历 Jquery 中的元素

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 对象那个身份证。请注意，我使用$(this).attr("href") 来获取href 而不仅仅是this.href，它将被扩展（因此会有完整的URL，而不仅仅是href 属性的实际内容）。

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

但是，如果出于其他原因，您想循环遍历 #tab-content 的子元素，则可以使用 each。

$('#myTabContent').children('div').each(function() {
    // Raw DOM element for each child `div` is `this`
});