Question

希望这个人不会走得太远 - 但我想知道jQuery中最快的方法是针对另一个元素（即$(this).whatever的近亲）用同样的方法数据id属性。我目前有以下标记（如果您使用最新的Bootstrap，您会注意到这只是一张带导航标题的简单卡片）：

<div class="card text-center">
  <div class="card-header pb-0">
    <ul id="contactGroups" class="nav justify-content-center nav-tabs card-header-tabs">
      <li class="nav-item" data-id="1">
        <a class="nav-link active" href="#">Contact Us</a>
      </li>
      <li class="nav-item" data-id="2">
        <a class="nav-link" href="#">Business Enquiries</a>
      </li>
      <li class="nav-item" data-id="3">
        <a class="nav-link" href="#">Follow Us</a>
      </li>
    </ul>
  </div>
  <div class="card-body active" data-id="1">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-body hidden" data-id="2">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-body hidden" data-id="3">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

正如您在上面的标记中看到的那样，我将data-id属性添加到列表元素中 - 我想进入并找到它相应的data-id（卡体活动或者卡身隐藏）所以我可以开始玩它们了。但是（!!）我不想选择我指定的一些仲裁#id或.class。我该怎么做呢？

到目前为止，我的jQuery如下所示（但是，这只会将当前类从非活动（或没有类）翻转到活动类，从而给出了tab swop幻觉：

$('#contactGroups').each(function(){
  $(this).find('li').each(function(){
    $(this).on('click', function() {                
      $('#contactGroups').find('.active').removeClass('active');
      $(this).find('a').addClass('active');
    })
  });
});

任何想法都会非常感激。

Answer 1

我不知道你是否

想要找到与div具有相同data-id的{{1}}，或
想要找到其他li的兄弟姐妹（＆＃34;兄弟＆＃34; +＆＃34;姐妹＆＃34; =＆＃34;兄弟姐妹＆＃34;）{已点击的{1}}也具有li属性。

在li上的点击处理程序中，data-id将引用被点击的li（它或其后代this元素）。考虑到这一点：

假设＃1：

您可以使用attr获取该元素的li：

（不要使用data-id，除非您需要var theId = `$(this).attr("data-id");提供的功能; more here。）

您可以使用data("id")或兄弟姐妹通过data在给定容器中找到元素。因此，从点击的find开始，您可以siblings访问标题的兄弟姐妹，也可以li搜索包含.closest(".card-header").siblings(...)的内容。前者更具体，但更脆弱;如果您的结构发生一些变化，后者会更加稳健。在性能方面都不重要。

所以我可能会前往.closest(".card").find(...)并使用.card标记和属性选择器组合：

.card

FWIW，无需在每个find上挂钩$(this).closest(".card").find("div[data-id='" + theId + "']")...。只需使用事件委托：

click

假设＃2

在li点击处理程序中使用$("#contactGroups").on("click", "li[data-id]", function() { var theId = $(this).attr("data-id"); var div = $(this).closest(".card").find("div[data-id='" + theId + "']"); // ... });查找所有带有$(this).siblings("[data-id]")（包含任意值）的兄弟姐妹。

完整工作示例

...根据您的意见：

＆＃13;

li

＆＃13;

data-id

＆＃13;

$("#contactGroups").on("click", "li[data-id]", function() {
    var theId = $(this).attr("data-id");
    var div = $(this).closest(".card").find("div[data-id='" + theId + "']");
    div.removeClass("hidden").addClass("active");
    div.siblings("[data-id]").removeClass("active").addClass("hidden");
});

＆＃13;

Answer 2

您不需要@RawQery，因为您只有一个each。
使用jQuery中的contactGroups函数。
使用data功能，您可以获得closest元素的祖先。
使用li功能添加或删除课程toggleClass。
使用此选择器active查找相关的$('div[data-id="${id}"]')＆＃39; li。
您可以使用此选择器绑定点击事件div

＆＃13;

$('#contactGroups li').on('click'), ...);

＆＃13;

$('#contactGroups li').on('click', function() {
  $(this).closest('#contactGroups').find('.active').toggleClass('active');

  $(this).children('a').toggleClass('active');

  $('div.card-body.active').toggleClass('active');

  let id = $(this).data('id');
  $(`div[data-id="${id}"]`).toggleClass('active');
});

＆＃13;

.active {
  color: green !important;
  background-color: lightgreen;
}

＆＃13;

用jQuery

2 个答案:

假设＃1：

假设＃2

完整工作示例