jQuery遍歷最近 <div> 一類
[英]jQuery Traversal Closest <div> of a class
問題描述
所以我試圖在這里找出一些jQuery。 我發現了一些有關jQuery遍歷的注釋，但似乎沒有什么適合我的需要。
這是一個代表我需要的假人。 <div class="parent">實際上是論壇發表評論的開始-該頁面上的許多評論之一。 其中有幾個<div>標簽作為子標簽。 這些<div>標記中的一個是具有“隱藏”按鈕的<span> 。 我需要該按鈕隱藏<div class="parent">的下一個<div class='specific-class'> <div class="parent"> 。 不管我單擊哪個隱藏按鈕，下面的代碼將始終隱藏“框1”。 我可以修改代碼以給每個注釋一個唯一的類，但是我寧願使用一些遍歷魔術來選擇正確的類。
原諒下面的快速代碼，僅供參考。 :)
$(".hideBtn").click(function() { var element = $("div.buttons").next(".hideable:first"); if (element.hasClass("hidden")) { element.removeClass("hidden"); element.slideDown("slow"); } else { element.addClass("hidden"); element.slideUp("slow"); } });
.hideBtn { font-size: large; width: 100px; height: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 5px; border-radius: 25px; background: #cecece; margin: 10px; text-align: center; vertical-align: middle; } .hideBtn:hover { background-color: #cccccc; } .box { width: 100px; padding: 20px; margin: 10px; height: 100px; border-radius: 25px; background: #bcbcbc; } .hideable { display: block; } .hidden { display: none; }
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <div class="parent"> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 1</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 2</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 3</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 4</div> </div>
2 個解決方案
解決方案1
4 已采納 2015-04-17 05:11:05
div .hidable是與父div.buttons最接近的單擊按鈕的div.buttons 。 因此，您需要遍歷.buttons ，然后使用.next()定位第一個.hideable ：
var element = $(this).closest('.buttons').next();
解決方案2
1 2015-04-17 05:13:11
這應該可以解決問題。 您只需要引用當前單擊的<a>按鈕，然后找到它的父.buttons ，然后找到具有.hideable類的下一個最近元素。 使用next(".hideable")確保即使在.buttons和.hideable容器之間有更多元素，您也將始終隱藏正確的<div class='hideable'>
$(this).closest(".buttons").next(".hideable");
例：
$(".hideBtn").click(function(e) { var element = $(this).closest(".buttons").next(".hideable"); if (element.hasClass("hidden")) { element.removeClass("hidden"); element.slideDown("slow"); } else { element.addClass("hidden"); element.slideUp("slow"); } });
.hideBtn { font-size: large; width: 100px; height: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 5px; border-radius: 25px; background: #cecece; margin: 10px; text-align: center; vertical-align: middle; } .hideBtn:hover { background-color: #cccccc; } .box { width: 100px; padding: 20px; margin: 10px; height: 100px; border-radius: 25px; background: #bcbcbc; } .hideable { display: block; } .hidden { display: none; }
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <div class="parent"> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 1</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 2</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 3</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 4</div> </div>
jQuery遍歷不適用於.closest（）、. parent（）。parent（）等
[英]Jquery traversal not working with .closest(), .parent().parent() etc
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.