使用 jQuery 在列表中查找 id

Question

我有一个属性列表，其中第一个包含活动 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>

我正在尝试使用 jQuery .find() 来 select 使用活动 class 的 'fee-summary-tab' id 但是我一直导致未定义。

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

Answer 1

你有几个问题。首先，.find 查找元素的后代，因此由于您已经使用选择器找到了 a，即使它确实具有 active，它也不会找到该元素class。将选择器更改为 ul.parcel-tabs li a.active 意味着您不需要执行 find。其次，你从 .attr 得到 id，而不是 .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>

Answer 2

.find，正如 docs 所说，在所选元素的 descendants 中搜索。而在您的 HTML 中，您的 active class 附加到 a 元素本身。

所以你应该改变

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

要么

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

或者

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

根据您的喜好，或者与您的其余代码一起使用效果更好。

Answer 3

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>

使用 jQuery 在列表中查找 id

Using jQuery to find an id within a list

html

javascript

jquery

html-lists