文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >使用.closest和.find获取要操作的值

问使用.closest和.find获取要操作的值
EN

Stack Overflow用户
提问于 2018-09-12 09:43:26
回答 1查看 48关注 0票数 1

您好，先谢谢您。

使用.closest和.find查找.cab输入字段的值是否正确？

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

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

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
$(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);
  })
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
.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%;
}
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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>

​

javascript
jquery
html
css
广告

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-12 09:51:51

关闭时，可以使用.text()将检索到的值附加到相关列。

较短版本:

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
$(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事件，因为它在跟踪用户输入时效率更高。

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
$(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);
  })
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
.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%;
}
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52300799

复制
相关文章
C# 中的“智能枚举”：如何在枚举中增加行为
c#public对象继承设计模式
在这个示例中，我们定义了一个名为 Weekday 的枚举，其中包括每个星期的日子。然后在 Main 方法中，我们将 today 变量设置为 Tuesday，并使用 ToString() 方法将其转换为字符串。
郑子铭
2023/08/30
3330
C# 中的“智能枚举”：如何在枚举中增加行为
Java 中枚举类的使用
编程算法java
在日常写项目时，很多数据字典常量都需要定义和使用，同时在 Java 面试中，枚举也是一个绕不开的话题，这篇文章就来详细介绍一下枚举的定义以及使用。 01  【什么是枚举类？】 枚举类型在 C# 或 C++ 、 java 、 VB 等一些编程语言中是一种基本数据类型而不是构造数据类型。 而在C语言中则是一种构造数据类型。它用于声明一组命名的常数，当一个变量有几种可能的取值时，可以将它定义为枚举类型。 枚举类的定义就是指将变量的值一一列出来，变量的值只限于列举出来的值的范围内，使用枚举可以很方便地定义数据常量
老九君
2022/09/02
1.6K0
Java 中枚举类的使用
如何在python文件中测试sql语句
pythonsql语句测试
在manage.py的同级目录下新建一个run.py import os if __name__ == '__main__': #加载Django项目的配置信息 os.environ.setdefault("DJANGO_SETTINGS_MODULE","myblog.settings") #导入Django,并启动Django项目 import django django.setup() 　#导入相应的models from person import models 　#测试s
西西嘛呦
2020/08/26
1.8K0
在JS中愉快地使用枚举
json编程算法
这样是非常常见的用法，包括很多类库都在这样做，但是如果哪天把字符串拼错了，就会直接返回false，所以说这个方法是不太合理的。
kifuan
2022/10/24
3.2K0
如何在 PHP 中运行 bind_param() 语句?
php
在PHP中，bind_param()函数是一种准备SQL语句并绑定参数的方法。它通常与预处理语句（prepared statements）一起使用，用于执行数据库操作。bind_param()函数可防止SQL注入攻击，并帮助提高代码的安全性。
七辰
2023/10/04
1.5K0
ts中枚举
官方文档字符串
填坑，官方文档：https://www.tslang.cn/docs/handbook/enums.html
阿超
2022/08/21
5440
ts中枚举
Struts2基本使用
struts网站servletmvcphp
是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架。
木瓜煲鸡脚
2019/09/17
5020
Struts2基本使用
Java枚举——枚举的作用、使用方法、使用场景
编程算法
枚举类是一种特殊类，它和普通类一样可以使用构造器、定义成员变量和方法，也可以实现多个接口，但不能继承类。
呆呆
2021/10/04
8500
4.Python中条件语句使用方法（if语句、if嵌套）
https网络安全
Python条件语句是通过一条或多条语句的执行结果（True或者False）来决定执行的代码块。
全栈程序员站长
2022/11/09
2.1K0
4.Python中条件语句使用方法（if语句、if嵌套）
matlab如何使用循环语句_matlab中循环语句怎么写
matlabjavahttps网络安全
clc clear a=1; m=3; for i=1:m %理解此处的m不是向量，是循环时的某一个固定值 b(i)=a*i %得到的b值保留前一个循环中计算的值。是一个随着i变化的向量，loop1时向量中有1个元素；loop2时有2个元素，分别是loop1中值和loop2中的值。这种情况下，不会覆盖loop1中参数。 c=a*i %得到循环某个值的具体值。是一个元素，loop2会覆盖loop1中元素 d(3)=a*i %d(3)表示其中包含3个元素，若不够则用0填。固定为一个有3个元素的向量，元素不够是用0填，会覆盖loop1中元素。 end
全栈程序员站长
2022/09/27
6.2K0
【DB笔试面试511】如何在Oracle中写操作系统文件，如写日志？
oracletcp/ipide编程算法数据库
可以利用UTL_FILE包，但是，在此之前，要注意设置好UTL_FILE_DIR初始化参数。
AiDBA宝典
2019/09/30
29K0
【DB笔试面试511】如何在Oracle中写操作系统文件，如写日志？
【说站】js中if语句的使用
boolean语法
2、ECMAScript 会自动调用Boolean()函数将这个表达式的值转换为布尔值。
很酷的站长
2022/11/24
2.4K0
【说站】js中if语句的使用
Workerman中SQL语句的使用 转
sql
(adsbygoogle = window.adsbygoogle || []).push({});
双面人
2019/04/10
1.8K0
java枚举使用详解
javaspring
在实际编程中，往往存在着这样的“数据集”，它们的数值在程序中是稳定的，而且“数据集”中的元素是有限的。 例如星期一到星期日七个数据元素组成了一周的“数据集”，春夏秋冬四个数据元素组成了四季的“数据集”。 在java中如何更好的使用这些“数据集”呢？因此枚举便派上了用场，以下代码详细介绍了枚举的用法。 package com.ljq.test; /** * 枚举用法详解 * * @author jiqinlin */ public class TestEnum { /** *
三哥
2018/06/15
7620
Java枚举类型使用
java
在编程中，常常遇到多种类型、多种状态的情况，对于这种可以事先预知的业务我们常常有两种表示方法:
付威
2018/12/05
2.2K0
在Android中使用枚举注解而不是枚举
android编程算法
很多开发规范都是不建议在Android中使用枚举的，在Android系统中使用枚举的开销是使用常量的2倍。一般地，在一个文件中定义常量
阳仔
2019/07/31
1.4K0
在Android中使用枚举注解而不是枚举
9.6 使用枚举类型
编程算法打包
1、如果一个变量只有几种可能的值，则可以定义为枚举类型，所谓“枚举”就是指把可能的值一一列举出来，变量的值只限于列举出来的值的范围内。
小林C语言
2019/07/12
5390
9.6 使用枚举类型
c++枚举类型enum输出_python中的枚举
httpsjava网络安全存储面向对象编程
Enum枚举:枚举是一组命名整型常量,枚举类型是使用 enum 关键字声明的。枚举是值类型，数据直接存储在栈中，而不是使用引用和真实数据的隔离方式来存储,其包含自己的值,且不能被继承或者传递继承,枚举中每个元素的基础类型是 int。可以使用冒号指定另一种整数值类型。
全栈程序员站长
2022/10/01
1.6K0
c++枚举类型enum输出_python中的枚举
枚举进程中的模块
其他
在Windows中枚举进程中的模块主要是其中加载的dll，在VC上主要有2种方式，一种是解析PE文件中导入表，从导入表中获取它将要静态加载的dll，一种是利用查询进程地址空间中的模块，根据模块的句柄来得到对应的dll，最后再补充一种利用Windows中的NATIVE API获取进程内核空间中的模块,下面根据给出这些方式的具体的代码片段：
Masimaro
2018/08/31
1.7K0
点击加载更多

相似问题

struts2: IF中的枚举

24

如何在Struts2中为FreeMarker结果启用枚举指令？

10

如何在SQLite中使用条件(如if语句等)

12

如何使用Microsoft枚举类型(如pjAutoFilterLessThan )？

17

使用枚举子集创建Struts2选择标记

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文