使用jQuery定位具有相同數據ID的姐妹/兄弟元素

Question

希望這不會太過分了-但我想知道jQuery中最快的方法是使用相同的data id屬性來定位另一個元素（即$(this).whatever ）。 我目前有以下標記（如果您使用最新的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如下（但是，這只會將當前類從非活動類（或無類）切換到活動類，從而產生標簽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

我不太清楚你是否

1. 想要找到與li相同的data-id的div ，或者

2. 想找到其它li s表示是姐弟（“兄弟” +“姐妹” =“兄弟姐妹”） li被點擊其中也有data-id屬性。

在li的點擊處理程序中， this將引用被點擊的li （它或其后代a元素）。 考慮到這一點：

假設1：

您可以使用attr獲得該元素的data-id ：

var theId = `$(this).attr("data-id");

（除非您需要data提供的功能，否則請不要使用data("id") ； 更多信息請參見 。）

您可以使用find或兄弟姐妹通過siblings在給定容器中查找元素。 因此，從單擊的li ，您可以執行.closest(".card-header").siblings(...)來訪問標頭的兄弟姐妹，也可以執行.closest(".card").find(...)搜索所有包含.card 。 前者更具體，但更脆弱； 如果您的結構有所變化，則后者會更強大。 在性能方面都不重要。

因此，我可能會選擇.card並將find與標簽和屬性選擇器組合使用：

$(this).closest(".card").find("div[data-id='" + theId + "']")...

FWIW，無需鈎住每個li click 。 只需使用事件委托：

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

假設＃2

在li click處理程序中使用$(this).siblings("[data-id]")查找其所有具有data-id （具有任何值）的兄弟姐妹。

---

完整的工作示例

...根據您的評論：

 $("#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"); }); 

 .hidden { display: none; } .active { font-weight: bold; } 

 <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">(1) 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">(2) 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">(3) 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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

• 您不需要each因為您只有一個contactGroups 。
• 使用jQuery中的data功能。
• 使用closest功能，您可以獲取li元素的祖先。
• 使用toggleClass函數添加或刪除active類。
• 使用此選擇器$('div[data-id="${id}"]')查找相關的li的div 。
• 您可以使用此選擇器綁定單擊事件$('#contactGroups li').on('click'), ...);

 $('#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'); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>