CODEWITHSUNDEEP
javascripthtmljqueryhtml-lists
Silverfin
Silverfin

Reputation: 495

Using jQuery to find an id within a list

I have a list of attributes the first of which contains the active class.

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

I am trying to use jQuery .find() to select the 'fee-summary-tab' id which uses the active class however I keep resulting in undefined.

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

Upvotes: 0

Views: 501

Answers (3)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17590

var activeTab = $('ul.parcel-tabs li').find('a.active')[0];
console.log(activeTab.id);
<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>

Upvotes: 1

Robin Zigmond
Robin Zigmond

Reputation: 18249

.find, as the docs say, searches in the descendants of the selected elements. Whereas in your HTML, your active class is attached to the a elements themselves.

So you should change

var activeTab = $('ul.parcel-tabs li a').find('.active');

to either

var activeTab = $('ul.parcel-tabs li a.active');

or perhaps

var activeTab = $('ul.parcel-tabs li').find('.active');

according to which you prefer, or which works better with the rest of your code.

Upvotes: 1

Nick
Nick

Reputation: 147146

You have a couple of issues. Firstly, .find looks for descendants of an element, so since you've already got to an a with your selector, it won't find that element even if it does have the active class. Changing your selector to ul.parcel-tabs li a.active means you don't need to do a find. Secondly, you get id from .attr, not .data. 

$(document).on('click', '#relationships-tab', function(event) {
  var activeTab = $('ul.parcel-tabs li a.active');
  alert(activeTab.attr('id'));
});
<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>

Upvotes: 2

Related Questions