查找父div和添加類

尋找一些幫助在這裏得到.parent()和.find()爲我工作...我有一系列的DIV在頁面上根據下面的代碼塊。我想要的是，當用戶滾動.linkerBtnhref，我添加了一個新的類到頂級父threeCol科稱爲newsFeedItemHovered - 請幫助！查找父div和添加類

<div class="threeCol"> 
    <div class="threeColInner"> 
    <div class="feedItemWrapper newsFeedItem noBottom"> 
     <h3> 
     <a title="News article 3" href="news-and-events/latest-news/news-article-3.html">News article 3</a> 
     </h3> 
     <p class="ItemStamp">03/09/2015</p> 
     <p>News post summary text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod euismod euismod. Quisque cursus quam sem, ac fermentum quam molestie in.</p> 
     <p class="noBottom"> 
     <a class="linkerBtn inline small" title="Read more about News article 3" href="news-and-events/latest-news/news-article-3.html">Read more</a> 
     </p> 
    </div> 
    </div> 
</div>

來源

2015-09-04 dubbs

等你的鼠標事件做這樣的事情：$（本）.closest（ 'DIV'）addClass（ '類名'）; –

$（this）.parents（'。threeCol'）。addClass（'...'）;'也可以。 –

$("a.linkerBtn").hover(function() { 
 
    // Add class while hovered over anchor 
 
    $(this).closest(".threeCol").addClass("newsFeedItemHovered"); 
 
}, function() { 
 
    // Remove class when we move away 
 
    $(this).closest(".threeCol").removeClass("newsFeedItemHovered"); 
 
});

.newsFeedItemHovered { 
 
    background-color: lightgrey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="threeCol"> 
 
    <div class="threeColInner"> 
 
    <div class="feedItemWrapper newsFeedItem noBottom"> 
 
     <h3><a title="News article 3" href="news-and-events/latest-news/news-article-3.html">News article 3</a></h3> 
 
     <p class="ItemStamp">03/09/2015</p> 
 
     <p>News post summary text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod euismod euismod. Quisque cursus quam sem, ac fermentum quam molestie in.</p> 
 
     <p class="noBottom"><a class="linkerBtn inline small" title="Read more about News article 3" href="news-and-events/latest-news/news-article-3.html">Read more</a> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="threeCol"> 
 
    <div class="threeColInner"> 
 
    <div class="feedItemWrapper newsFeedItem noBottom"> 
 
     <h3><a title="News article 3" href="news-and-events/latest-news/news-article-3.html">News article 3</a></h3> 
 
     <p class="ItemStamp">03/09/2015</p> 
 
     <p>News post summary text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod euismod euismod. Quisque cursus quam sem, ac fermentum quam molestie in.</p> 
 
     <p class="noBottom"><a class="linkerBtn inline small" title="Read more about News article 3" href="news-and-events/latest-news/news-article-3.html">Read more</a> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-09-04 21:03:17 Barmar

圖例....感謝 - 第二次.closest雖然錯;）;） – dubbs

查找父div和添加類

回答

相關問題