时间戳

首页 > 解决方案 > jQuery - 在父 div 的朋友 div 中获取元素

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

问题描述

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。但我不知道怎么做。有任何想法吗？

标签： javascriptjqueryhtml

解决方案

一种粗略的方法是让父母/父母最接近的兄弟姐妹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>

推荐阅读