Wie Element zum Ziel, das nicht mit jquery

Question

Meine html versteckt sich wie folgt:

{# 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> 

Und mein jquery ist wie folgt:

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

Aber das Problem ist, dass es die Navigationszielen, die ist versteckt. Wenn ich auf einem großen Bildschirm bin, ist die erste Navigation ausgeblendet, aber JQuery zielt nicht auf das Nav, das nicht versteckt ist (zweites), sondern es zielt auf das versteckte (das erste).

Irgendeine Idee, wie man es löst?

Answer 1

Stellen Sie sicher, Einzigartige id Attribute

Zunächst müssen Sie berücksichtigen Ihre idas they are guaranteed to be unique by definition Attribute bestehende umbenennen und somit alle möglichen Probleme verursachen kann, wenn dies nicht der Fall ist.

Betrachten wir ein class Attribut oder ein data-* Attribut, dies zu umgehen, anstatt (Attribute nähern unten gezeigt):

<!-- 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> 

Sie könnten dann nutzen, als erwartet:

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

Die :visible Betrachten Selektor

Zweitens, wenn Sie r eally wollte nur das Element zum Ziel, die sichtbar war, konnte man die :visible selector in jQuery betrachten zu handhaben diese: eine schlechte Idee

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

Answer 2

Mit doppeltem Ids ist überall, aber wenn Sie wirklich eine schnelle Lösung benötigen Ziel Verwenden Sie bei beiden Elementen den Attributselektor:

. Verwenden Sie daher anstelle von $('#make')$('[id="make"]').