如果父類中存在類，則獲取子div內容

Question

我有一個模塊，懸停時要更改右側的內容（下面演示中的藍色div中的內容）。

為此，我想做的是：

• 如果存在類。主動li.tabs 然后 ，拿到.content來自它，並在顯示它.overview股利。

但不確定的我如何能得到.content時類.active在存在.overview ？

我有以下標記（簡化）：

 // 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> 

Answer 1

完整的代碼以及活動的類切換：

 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> 

也在JSFiddle上

Answer 2

您可以通過在選擇器之間留一個空格來選擇子級（在JQuery中）：

$(".li.tabs.active .content") 

將選擇的所有content那些被父母有active類