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>