[英]Get child div content if class exists on parent
I have a module where, on hover, I want the content on the right to change (stuff in the blue div in the demo below). 我有一个模块,悬停时要更改右侧的内容(下面演示中的蓝色div中的内容)。
To achieve this, what I'm trying to do is: 为此,我想做的是:
li.tabs
then , get the .content
from it and display it in the .overview
div. li.tabs
然后 ,拿到.content
来自它,并在显示它.overview
股利。 But unsure on how I can get .content
when class .active
exists in .overview
? 但不确定的我如何能得到
.content
时类.active
在存在.overview
?
I have the following markup (simplified): 我有以下标记(简化):
// 1. Check if li has class active if ($('li.tabs').hasClass('active')) { // 2. get .content div from li where class .active exists }
.tabs{ border: 1px solid yellow; } .list { border: 1px solid red; flex-basis: 40%; } .list li { list-style-type: none; } .overview { border: 1px solid blue; -ms-flex-preferred-size: 60%; flex-basis: 60%; }
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="d-flex flex-row"> <div class="list"> <li class="tabs active"> <div class="header"><span>Header</span></div> <div class="content d-none"><p>content</p></div> </li> <li class="tabs"> <div class="header"><span>Header 2</span></div> <div class="content d-none"><p>content 2</p></div> </li> </div> <div class="overview"> </div> </div>
Complete code for your, together with active class toggle: 完整的代码以及活动的类切换:
var overview = $('.overview'); $('.tabs').each(function(i) { var thisTab = $(this); var thisContent = thisTab.find('.content').html(); thisTab.on('mouseenter', function(e) { thisTab.addClass('active'); overview.html(thisContent); }).on('mouseleave', function(e) { thisTab.removeClass('active'); overview.html(''); }); });
.tabs { border: 1px solid yellow; } .tabs.active { background: none yellow; } .list { border: 1px solid red; flex-basis: 40%; } .list li { list-style-type: none; } .overview { border: 1px solid blue; -ms-flex-preferred-size: 60%; flex-basis: 60%; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="d-flex flex-row"> <div class="list"> <li class="tabs"> <div class="header"><span>Header</span></div> <div class="content d-none"> <p>Content 1</p> </div> </li> <li class="tabs"> <div class="header"><span>Header 2</span></div> <div class="content d-none"> <p>Content 2</p> </div> </li> </div> <div class="overview"> </div> </div>
You can select a children by letting a space between the selectors (in JQuery): 您可以通过在选择器之间留一个空格来选择子级(在JQuery中):
$(".li.tabs.active .content")
will select all the content
whom parents have the active
class 将选择的所有
content
那些被父母有active
类
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.