时间戳

首页 > 解决方案 > 如何使用最接近的选择 div

javascript - 如何使用最接近的选择 div

问题描述

我有一个项目的动态表格。第一行项目表单将出现 (+) 和 (-) 按钮，接下来他们单击前一行中的 (+) 按钮和 (-)，现在当我想删除具有 (+) 和 (-) 的行时遇到问题)，我需要在上一行添加 (+) 按钮。我阅读了有关最接近并找到的信息，但我无法使用它。

这是我的html

var index = 1;

$(document).ready(function() {
  addItems(index);
});

function addItems(index) {
  $('#btn-add-item').remove();

  $('#item_list').append(
    "<div class='items' id='item_" + index + "'>" +
    "<div class='row'>" +
    "<div class='col-md-3'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_qty[]' placeholder='Item qty' data-error='Item qty cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-7'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_name[]' placeholder='Item name' data-error='Item name cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-2' id='btn_action'>" +
    "<button id='btn-remove-item' type='button' class='btn btn-danger' style='margin-right: 5px' onclick='removeItem(" + index + ")'><i class='fa fa-minus'></i></button>" +
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>" +
    "</div>" +
    "</div>" +
    "</div>"
  );
  index++;
}

function removeItem(index) {
  $('#item_' + index).closest("items").find("#btn_action").append(
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>"
  );
  $('#item_' + index).remove();
  index--;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row bg-title">
  <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
    <h4 class="page-title">Tambah Transaksi</h4>
  </div>
  <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
    <ol class="breadcrumb">
      <li>Transaksi</li>
      <li class="active">Tambah Transaksi</li>
    </ol>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
      <form action="#" class="form">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nomor Transaksi</label>
              <input type="text" class="form-control" name="transaction_number" id="transaction_number" disabled>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nama Pembeli</label>
              <input type="text" class="form-control" name="buyer_name" id="buyer_name">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Alamat Pembeli</label>
              <textarea type="text" class="form-control" name="buyer_address" id="buyer_address" cols="10" rows="5"></textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>Items</label>
            </div>
          </div>
        </div>
        <div id="item_list"></div>
      </form>
    </div>
  </div>
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
    </div>
  </div>
</div>

谢谢你们的帮助。

标签： javascriptjqueryhtml

解决方案

你正在寻找的是.prev和不是.closest。

正如@ Priyal Pithadiya正确指出的那样，您需要在添加元素之前添加一个检查。

var $item = $('#item_' + index)
var shouldAppendButton = !!$item.find('#btn-add-item').length;
if (shouldAppendButton)
  $item
  .prev()
  .find("#btn_action")
  .append(
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>"
  );
$item.remove();

解释

  • .closest：它在层次结构中查找并找到必要的元素。它不寻找以前的兄弟姐妹。
  • .prev: 它寻找上一个兄弟姐妹。

样本：

var index = 1;

$(document).ready(function() {
  addItems(index);
});

function addItems(index) {
  $('#btn-add-item').remove();

  $('#item_list').append(
    "<div class='items' id='item_" + index + "'>" +
    "<div class='row'>" +
    "<div class='col-md-3'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_qty[]' placeholder='Item qty' data-error='Item qty cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-7'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_name[]' placeholder='Item name' data-error='Item name cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-2' id='btn_action'>" +
    "<button id='btn-remove-item' type='button' class='btn btn-danger' style='margin-right: 5px' onclick='removeItem(" + index + ")'><i class='fa fa-minus'></i></button>" +
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>" +
    "</div>" +
    "</div>" +
    "</div>"
  );
  index++;
}

function removeItem(index) {
  var $item = $('#item_' + index)
  var shouldAppendButton = !!$item.find('#btn-add-item').length;
  if(shouldAppendButton)
    $item
      .prev()
      .find("#btn_action")
      .append(
        "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>"
      );
  $item.remove();
  index--;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row bg-title">
  <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
    <h4 class="page-title">Tambah Transaksi</h4>
  </div>
  <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
    <ol class="breadcrumb">
      <li>Transaksi</li>
      <li class="active">Tambah Transaksi</li>
    </ol>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
      <form action="#" class="form">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nomor Transaksi</label>
              <input type="text" class="form-control" name="transaction_number" id="transaction_number" disabled>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nama Pembeli</label>
              <input type="text" class="form-control" name="buyer_name" id="buyer_name">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Alamat Pembeli</label>
              <textarea type="text" class="form-control" name="buyer_address" id="buyer_address" cols="10" rows="5"></textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>Items</label>
            </div>
          </div>
        </div>
        <div id="item_list"></div>
      </form>
    </div>
  </div>
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
    </div>
  </div>
</div>

指针：

  • ID 必须是唯一的。在所有项目 div 中具有相同的 id 是错误的。
  • 您还可以添加委托，而不是在每个项目的标记中添加处理程序

推荐阅读