jQuery-在父div的朋友div中獲取元素

Question

的HTML

 <div class="container-fluid"> <div class="input-page">...</div> <!-- field 1 --> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <!-- field 2 --> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <!-- field 3 --> <div class="col-md-12 col-sm-12 col-xs-12 no-padding"> <!-- I want to grab this block --> <div class="x_panel"> <div class="x_content"> <form class="data-table"> <div class="row">...</div> <div class="row">...</div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding"> <div class="btn-group"> <button>Add</button> <!-- when I click this button --> <button>Other</button> </div> </div> </div> 

上面的代碼是簡化版本，但實際代碼看起來像這樣：

每個“ field ”都是內容div和按鈕div 。 當我按下“添加”按鈕時，我想獲取其上方的內容div。

我正在考慮首先嘗試$(this).closest('.container-fluid') ，然后導航到具有單擊按鈕的div上方的div。 但是我不知道如何。 有任何想法嗎？

Answer 1

一個粗暴的方式是獲取父/母與最接近的同級prev

 $("#AddButton").click(function() { var blockToGrab = $(this).parent().parent().prev(); // do stuff with block console.log("I found: " + blockToGrab.html()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="input-page">...</div> <!-- field 1 --> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <!-- field 2 --> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding">...</div> <!-- field 3 --> <div class="col-md-12 col-sm-12 col-xs-12 no-padding"> <!-- I want to grab this block --> <div class="x_panel"> <div class="x_content"> <form class="data-table"> <div class="row">...</div> <div class="row">...</div> </form> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding"> <div class="btn-group"> <button id="AddButton">Add</button> <!-- when I click this button --> <button>Other</button> </div> </div> </div>