时间戳

首页 > 解决方案 > 使用 .closest 和 .find 获取要操作的值

javascript - 使用 .closest 和 .find 获取要操作的值

问题描述

您好，提前谢谢您。

我在使用.closest并.find从.cab输入字段中查找值的方向正确吗？

我计划采用这些值，然后在 .cdmyour DIV 中显示适当的门尺寸。

有没有更好的方法来完成这个？这将是大约 20 行的一排，所以我宁愿不使用 ID 来完成工作，因为我相信这需要更多的代码。

$(document).ready(function() {
  $(".cab").keyup(function() {
    var parent = $(this).closest('.cdmrow');
    var width = parent.find(".cdmcolhalf:eq(0)").val();
    var height = parent.find(".cdmcolhalf:eq(1)").val();
    var dwidth = parent.find(".cdmcolhalf:eq(2)").val();
    var dheight = parent.find(".cdmcolhalf:eq(3)").val();
    console.log(width);
    console.log(height);
    console.log(dwidth);
    console.log(dheight);
  })
})
.cdmh1 {
  text-align: center;
}

.cdmrow {
  display: flex;
  flex-direction: row;
  text-align: center;
}

.cdmcol {
  border-style: solid;
  border-width: 1px;
  width: 14.28%;
}

.cdmcol1 {
  width: 14.28%;
}

.cdmcolmeas {
  width: 57.14%;
}

.cdmyourord {
  width: 28.58%;
}

.cdmcolhalf {
  width: 7.142%;
  border-style: solid;
  border-width: .5px;
}

.cdmyour {
  background-color: lightgrey;
}

.cab {
  width: 50%;
  text-align: center;
  margin: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1 class="cdmh1">
    About Your Space | Cabinet Door Measurements
  </h1>
  <div class="cdmtable">
    <div class="cdmrow">
      <div class="cdmcol1">
      </div>
      <div class="cdmcolmeas">
        Your Cabinet's Measurements
      </div>
      <div class="cdmyourord cdmyour">
        Your Order
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol cdmyour">
        Single Doors
      </div>
      <div class="cdmcol cdmyour">
        Double Doors
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
        Opening Width (in)
      </div>
      <div class="cdmcol">
        Opening Height (in)
      </div>
      <div class="cdmcol">
        Reveal Between Double Doors (in)
      </div>
      <div class="cdmcol">
        Desired Overlay (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
        Door 1
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
    </div>

  </div>
</div>

标签： javascriptjqueryhtmlcss

解决方案

您已经很接近了，您可以使用 将检索到的值附加到相关列.text()。

较短的版本：

$(document).ready(function() {
  $(".cab").on('input', function() {
    var parent = $(this).closest('.cdmrow');

    parent.find(".cab").each(function(i, v) {
      parent.find(".cdmcolhalf").eq(i).text($(this).val());
    });
  });
});

注意：您必须将选择器类从 to 更改cdmcolhalf为cab，我建议改用inputevent，因为它在跟踪用户输入时更有效。

$(document).ready(function() {
  $(".cab").on('input', function() {
    var parent = $(this).closest('.cdmrow');

    var width = parent.find(".cab:eq(0)").val();
    var height = parent.find(".cab:eq(1)").val();
    var dwidth = parent.find(".cab:eq(2)").val();
    var dheight = parent.find(".cab:eq(3)").val();

    parent.find(".cdmcolhalf:eq(0)").text(width);
    parent.find(".cdmcolhalf:eq(1)").text(height);
    parent.find(".cdmcolhalf:eq(2)").text(dwidth);
    parent.find(".cdmcolhalf:eq(3)").text(dheight);
  })
})
.cdmh1 {
  text-align: center;
}

.cdmrow {
  display: flex;
  flex-direction: row;
  text-align: center;
}

.cdmcol {
  border-style: solid;
  border-width: 1px;
  width: 14.28%;
}

.cdmcol1 {
  width: 14.28%;
}

.cdmcolmeas {
  width: 57.14%;
}

.cdmyourord {
  width: 28.58%;
}

.cdmcolhalf {
  width: 7.142%;
  border-style: solid;
  border-width: .5px;
}

.cdmyour {
  background-color: lightgrey;
}

.cab {
  width: 50%;
  text-align: center;
  margin: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1 class="cdmh1">
    About Your Space | Cabinet Door Measurements
  </h1>
  <div class="cdmtable">
    <div class="cdmrow">
      <div class="cdmcol1">
      </div>
      <div class="cdmcolmeas">
        Your Cabinet's Measurements
      </div>
      <div class="cdmyourord cdmyour">
        Your Order
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol cdmyour">
        Single Doors
      </div>
      <div class="cdmcol cdmyour">
        Double Doors
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
        Opening Width (in)
      </div>
      <div class="cdmcol">
        Opening Height (in)
      </div>
      <div class="cdmcol">
        Reveal Between Double Doors (in)
      </div>
      <div class="cdmcol">
        Desired Overlay (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
        Door 1
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
        Door 2
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
    </div>

  </div>
</div>

推荐阅读