使用jQuery在列表中找到一个id

Question

我有一个属性列表，其中第一个属性包含活动类。

<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()来选择'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 类。将你的选择器改为 ul.parcel-tabs li a.active 意味着你不需要做一个 find. 第二，你会得到 id 从 .attr，不 .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作为 文件 比如说，搜索在 后人 的元素。而在您的HTML中，您的 active 班级被连接到 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>