使用.closest和.find获取值进行操作

时间：2018-09-12 17:43:27

标签： javascript jquery html css

你好，谢谢你。

我使用.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>

1 个答案:

答案 0 :(得分：0)

您即将关闭，您可以使用.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());
    });
  });
});

注意：：您必须将选择器类从cdmcolhalf更改为cab，我建议使用input事件，因为它在以下情况下会更有效跟踪用户输入。

$(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>

相关问题
最新问题