Dev Faq
0
votes

Utilisation de jQuery pour trouver un identifiant dans une liste

J'ai une liste d'attributs que la première contient la classe active. 

.on('click', '#relationships-tab', function (event) {
    var activeTab = $('ul.parcel-tabs li a').find('.active');
    alert(activeTab.data('id'));
});

1 commentaires

Vous ne pouvez sélectionner que l'élément avec la classe active et la console journal de l'identifiant console.log (document.Quiseryselector ('.acactive '). ID)

3 Réponses :

2
votes

Vous avez quelques problèmes. Tout d'abord, .Find code> recherche des descendants d'un élément, de sorte que vous êtes déjà arrivé à un A code> avec votre sélecteur, il ne trouvera pas cet élément même s'il le fait avoir la classe active code>. Changer votre sélecteur sur UL.Parcel-Tabs Li A.acactive code> Vous n'avez pas besoin de faire un trouver code>. Deuxièmement, vous obtenez id code> à partir de .attr code>, pas .Data ​​code>.

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parcel-tabs panel-header">
  <li class="tab-list">
    <a id="fee-summary-tab" href="#feeSummary" class="active">
      <span class="tab-label">Fee Summary</span>
    </a>
  </li>
  <li class="tab-list">
    <a id="relationships-tab" href="#relationships">
      <span class="tab-label">Parcel Relationships</span>
    </a>
  </li>
  <li class="tab-list">
    <a id="accounts-tab" href="#accounts">
      <span class="tab-label">Accounts</span>
    </a>
  </li>
</ul>

0 commentaires
1
votes

.Find , comme le Docs dit, recherche dans le descendants des éléments sélectionnés. Alors que dans votre HTML, votre classe active est connectée aux éléments A eux-mêmes.

Vous devez donc changer xxx < p> à xxx

ou peut-être xxx

selon lequel vous préférez, ou qui fonctionne mieux avec le reste de votre code.

0 commentaires
1
votes 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parcel-tabs panel-header">
    <li class="tab-list">
        <a id="fee-summary-tab" href="#feeSummary" class="active">
            <span class="tab-label">Fee Summary</span>
        </a>
    </li>
    <li class="tab-list">
        <a id="relationships-tab" href="#relationships">
            <span class="tab-label">Parcel Relationships</span>
        </a>
    </li>
    <li class="tab-list">
        <a id="accounts-tab" href="#accounts">
            <span class="tab-label">Accounts</span>
        </a>
    </li>
</ul>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO