[英]Targeting a sister/brother element with the same data-id with jQuery
Hopefully this one doesn't go off the beaten track too much - but I was wondering what the quickest method is in jQuery for targeting another element (that is a close relative of $(this).whatever
) with the same data id attribute. 希望这不会太过分了-但我想知道jQuery中最快的方法是使用相同的data id属性来定位另一个元素(即$(this).whatever
)。 I currently have the following markup (if you use the latest Bootstrap you'll notice that this is just a simple card with nav headings): 我目前有以下标记(如果您使用最新的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>
As you can see in the above markup I have data-id attributes added to the list elements - I want to then go in and find it's corresponding data-id (the ones with the card-body active or card-body hidden) so I can begin to play with them. 如您在上面的标记中看到的,我已经将data-id属性添加到列表元素-我想进入并找到它的对应data-id(那些卡身处于活动状态或卡身处于隐藏状态的数据),所以我可以开始和他们一起玩。 However (!!) I don't want to select on some arbitary #id or .class that I assign. 但是(!!)我不想选择我分配的任意#id或.class。 How would I go about doing this? 我将如何去做呢?
My jQuery thus far is as follows (however, this only flips the current class from non-active (or no class) to the active class giving the tab swop illusion: 到目前为止,我的jQuery如下(但是,这只会将当前类从非活动类(或无类)切换到活动类,从而产生标签swop错觉:
$('#contactGroups').each(function(){
$(this).find('li').each(function(){
$(this).on('click', function() {
$('#contactGroups').find('.active').removeClass('active');
$(this).find('a').addClass('active');
})
});
});
Any thoughts would be greatly appreciated. 任何想法将不胜感激。
I can't quite make out whether you 我不太清楚你是否
Want to find the div
with the same data-id
as the li
, or 想要找到与li
相同的data-id
的div
,或者
Want to find other li
s that are siblings ("brothers" + "sisters" = "siblings") of the li
that was clicked which also have data-id
attributes. 想找到其它li
s表示是姐弟(“兄弟” +“姐妹” =“兄弟姐妹”) li
被点击其中也有data-id
属性。
In the click handler on the li
, this
will refer to the li
that was clicked (it or its descendant a
element). 在li
的点击处理程序中, this
将引用被点击的li
(它或其后代a
元素)。 With that in mind: 考虑到这一点:
You can get the data-id
of that element using attr
: 您可以使用attr
获得该元素的data-id
:
var theId = `$(this).attr("data-id");
(Don't use data("id")
unless you need the features data
provides; more here .) (除非您需要data
提供的功能,否则请不要使用data("id")
; 更多信息请参见 。)
You can find elements within a given container using find
, or siblings via siblings
. 您可以使用find
或兄弟姐妹通过siblings
在给定容器中查找元素。 So starting from the clicked li
, you can either do .closest(".card-header").siblings(...)
to access the header's siblings, or .closest(".card").find(...)
to search all through the containing .card
. 因此,从单击的li
,您可以执行.closest(".card-header").siblings(...)
来访问标头的兄弟姐妹,也可以执行.closest(".card").find(...)
搜索所有包含.card
。 The former is more specific, but more fragile; 前者更具体,但更脆弱; the latter is more robust if your structure changes a bit. 如果您的结构有所变化,则后者会更强大。 Neither matters in terms of performance. 在性能方面都不重要。
So I'd probably go up to .card
and use find
with a tag and attribute selector combination: 因此,我可能会选择.card
并将find
与标签和属性选择器组合使用:
$(this).closest(".card").find("div[data-id='" + theId + "']")...
FWIW, there's no need to hook click
on each individual li
. FWIW,无需钩住每个li
click
。 Just use event delegation: 只需使用事件委托:
$("#contactGroups").on("click", "li[data-id]", function() {
var theId = $(this).attr("data-id");
var div = $(this).closest(".card").find("div[data-id='" + theId + "']");
// ...
});
Use $(this).siblings("[data-id]")
in the li
click handler to find all of its siblings with a data-id
(with any value). 在li
click处理程序中使用$(this).siblings("[data-id]")
查找其所有具有data-id
(具有任何值)的兄弟姐妹。
...based on your comments: ...根据您的评论:
$("#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>
each
because you have only one contactGroups
. 您不需要each
因为您只有一个contactGroups
。 data
function from jQuery. 使用jQuery中的data
功能。 closest
function you can get the ancestor of li
elements. 使用closest
功能,您可以获取li
元素的祖先。 toggleClass
function to add or remove the class active
. 使用toggleClass
函数添加或删除active
类。 $('div[data-id="${id}"]')
to find the related li
's div
. 使用此选择器$('div[data-id="${id}"]')
查找相关的li
的div
。 $('#contactGroups li').on('click'), ...);
您可以使用此选择器绑定单击事件$('#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.