jquery - 如何定位未用jQuery隐藏的元素

我的HTML如下：

{# Navigation for xs screens #}
<div class="small-screen-nav hidden-lg hidden-md hidden-sm col-xs-12" style="padding: 0;">
    <ol class="breadcrumb" style="padding: 0px 7.5px">
        <li><a href="#" id="make" class="active">Make</a></li>
        <li><a href="#" id="model">Model</a></li>
    </ol>
</div>

{# Navigation for sm, md, lg screens #}
<div id="calculation-menu" class="col-lg-2 hidden-xs">
    <div class="list-group">
        <a href="#" id="make" class="list-group-item active">Make</a>
        <a href="#" id="model" class="list-group-item">Model</a>
    </div>
</div>

而我的jQuery如下：

<script>
    $(document).ready(function () {
        $('#make').removeClass('active').html("Some text");
        $('#model').addClass('active');
    })
</script>

但是问题在于它以隐藏的导航为目标。如果我在大屏幕上，则第一个导航是隐藏的，但是jquery的目标不是未隐藏的nav（第二个），而是它的目标是隐藏的（第一个）。

知道如何解决吗？

最佳答案

确保唯一的id属性

首先，您需要考虑重命名现有的id属性as they are guaranteed to be unique by definition，这样可能会导致各种问题。

考虑使用class属性或data-*属性来代替处理（下面展示的属性方法）：

<!-- Mobile -->
<div class="small-screen-nav hidden-lg hidden-md hidden-sm col-xs-12" style="padding: 0;">
    <ol class="breadcrumb" style="padding: 0px 7.5px">
        <li><a href="#" class="active" data-make>Make</a></li>
        <li><a href="#" data-model>Model</a></li>
    </ol>
</div>

<!-- Small, Medium, and Large -->
<div id="calculation-menu" class="col-lg-2 hidden-xs">
    <div class="list-group">
        <a href="#" class="list-group-item active" data-make>Make</a>
        <a href="#" class="list-group-item" data-model>Model</a>
    </div>
</div>

然后，您可以按预期使用它：

<script>
    $(function () {
        $('[data-make]').removeClass('active').html("Some text");
        $('[data-model]').addClass('active');
    });
</script>

考虑:visible选择器

其次，如果您真的只想定位可见的元素，则可以考虑使用jQuery中的:visible selector来处理此问题：

// This will only target the element with the data-make attribute that is currently visible
$('[data-make]:visible')