首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从动态创建的具有相同id的元素中获取select .val()或div .text()?

从动态创建的具有相同id的元素中获取select .val()或div .text()的方法是通过使用类选择器或其他属性选择器来选择元素,而不是使用id选择器。因为id应该是唯一的,不应该在同一文档中存在多个具有相同id的元素。

对于select元素,可以使用类选择器或其他属性选择器来选择具有相同类名或其他相同属性的元素,并使用.val()方法来获取其值。例如,如果具有相同类名"my-select"的多个select元素,可以使用类选择器".my-select"来选择它们,并使用.val()方法来获取选中的值。

对于div元素,可以使用类选择器或其他属性选择器来选择具有相同类名或其他相同属性的元素,并使用.text()方法来获取其文本内容。例如,如果具有相同类名"my-div"的多个div元素,可以使用类选择器".my-div"来选择它们,并使用.text()方法来获取它们的文本内容。

以下是一个示例代码:

HTML:

代码语言:txt
复制
<select class="my-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select class="my-select">
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>

<div class="my-div">Text 1</div>
<div class="my-div">Text 2</div>

JavaScript:

代码语言:txt
复制
// 获取select元素的值
var selectValues = [];
$(".my-select").each(function() {
  selectValues.push($(this).val());
});
console.log(selectValues);

// 获取div元素的文本内容
var divTexts = [];
$(".my-div").each(function() {
  divTexts.push($(this).text());
});
console.log(divTexts);

上述代码中,使用类选择器".my-select"选择所有具有类名"my-select"的select元素,并使用.each()方法遍历它们,通过$(this).val()获取每个select元素的值,并将其存储在selectValues数组中。同样地,使用类选择器".my-div"选择所有具有类名"my-div"的div元素,并使用.each()方法遍历它们,通过$(this).text()获取每个div元素的文本内容,并将其存储在divTexts数组中。

请注意,为了避免混淆和冲突,建议在动态创建元素时使用不同的类名或其他属性来标识它们,而不是使用相同的id。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web前端JQuery面试题(二)

:not(selector) 获取除给定选择器外所有元素 first() :first 获取第一个元素 last() :last 获取最后一个元素 内容过滤选择器: :contains(text...) 获取包含给定文本元素 :empty 获取所有不包含子元素文本元素 如: :has(selector) 获取含所选择器所有元素 :parent 获取含有子元素文本元素...text(): 获取元素文本内容 text(val): 设置元素文本内容 val(): 获取元素val(val): 为元素设置值 val().join(","): 获取选中多个选项值...,用于获取select多个选项值 设置元素样式 css(name,value); name 样式名称,value样式值 添加样式 addClass(class) 和 addClass(class0...切换样式 toggleClass(class) 如果有该类class就删除,如果没有就添加 进行方法间切换效果 删除类 removeClass(class); 创建节点元素动态创建页面元素

1.9K30

jqueryhtml,text,val

.html()用为读取和修改元素HTML标签 .text()用来读取修改元素纯文本内容 .val()用来读取修改表单元素value值。...其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时....html(),.text(),.val()都可以使用回调函数返回值来动态改变多个元素内容。...: here is a paragram here is a big DIV     } 总结:val()---一般 用在input上,而不用在其他元素,用来获取input或者是select值 html... ] 最后,val()属性也有两个方法,一个有参,一个无参。        1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 ,可以返回任意元素值了。

1.9K50

前端之jQuery

$("div").filter(".c1") // 结果集中过滤出有c1样式类 等价于 $("div.c1") 补充: .first() // 获取匹配第一个元素 .last() // 获取匹配最后一个元素...3.1.2位置操作 offset()// 获取匹配元素在当前窗口相对偏移设置元素位置 position()// 获取匹配元素相对父元素偏移 scrollTop()// 获取匹配元素相对滚动条顶部偏移...值: val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素val([val1, val2])// 设置多选checkbox、多选select值 $('div')...目的: 我们已经创建事件如果想被动态创建标签使用就需要用到事件委托,比如已经创建好了按钮点击事件如果我们要将这个事件绑定给动态创建一个按钮就通过事件委托,将事件绑定给按钮父标签,这样当子标签...终止each循环 return false; 3.9.2.data() 在匹配元素集合所有元素上存储任意相关数据返回匹配元素集合第一个元素给定名称数据存储值。

4.9K21

day41_jQuery学习笔记_02

这个元素位置是0算起。即:0表示开始第一个     -index:负数,尾开始获得指定索引元素集合最后一个元素开始倒数。...返回是布尔值 filter()            筛选出与指定表达式匹配元素集合,A、B、C筛选出A、B来 not()               将指定内容删除,A、B、C删除A、B..." value="选择class为onediv,子元素没有title属性divid="btn8"/>              // 换句话说:选择class为onediv,然后把有title...js是:focus         focusin事件跟focus事件区别在于:它可以在父元素上检测子元素获取焦点情况。     focusout    失去焦点。.../body> 示例动图如下: 7.3.2、事件委派 详解如下: live(type, fn)      绑定事件,之后我们动态添加同样成员,也具有相同事件。

3.8K20

jqueryhtml,text,val

一 意义:     1.html()用为读取和修改元素HTML标签     2.text()用来读取修改元素纯文本内容     3.val()用来读取修改表单元素value值。...二 这三个方法功能上对比 .html(),.text(),.val()三种方法都是用来读取选定元素内容; 只不过.html()是用来读取元素HTML内容(包括其Html标签),.text()用来读取元素纯文本内容...其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上; 另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时....html(),.text(),.val()都可以使用回调函数返回值来动态改变多个元素内容。...()); //显示为: //here is a paragram //here is a big DIV } 四 总结 val()一般 用在input上,而不用在其他元素,用来获取input或者是select

1.5K20

JQuery最全常用方法指南

,如果不存在就设置此样式 $(”input元素名称”).val(); 获取input元素值 $(”input元素名称”).val(value); 设置input元素值为value Manipulation...slice(start, [end]) 匹配元素集合取得一个子集,和内建数组slice方法相同。 add(expr) 把与表达式匹配元素添加到jQuery对象。...().css(”border”, “2px red solid”); JQuery Selectors 方法说明 基本选择器 $(”#myDiv”) 匹配唯一具有id元素 $(”div”) 匹配指定名称所有元素...”) 匹配所有可见元素 属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性元素 $(”input[name =’newsletter’]”) 匹配所有具有指定属性值元素 $(”input....innerHTML; 3、如何获取jQuery集合某一项 对于获取元素集合,获取其中某一项(通过索引指定)可以使用eqget(n)方法或者索引号获取,要注意,eq返回是jquery对象,而

11K31

jQuery

可以先筛选元素(标签),然后再对该元素做出动态操作 格式:$(selector).action() selector:通过选择器获取元素 action:获取元素动作行为 jQuery对象 JSDOM...) 匹配所有小于给定索引值元素 :not(元素选择器) 移除所有满足not条件标签 :has(元素选择器) 选取所有包含一个多个标签在其内标签(指的是后代元素找) ps:可以写括号内,也可以点出来...last() 获取匹配最后一个元素 not() 匹配元素集合删除与指定表达式匹配元素 has() 保留包含特定后代元素,去掉那些不含有指定后代元素。...,有值就设置 HTML代码 html()// 取得第一个匹配元素html内容 html(val)// 设置所有匹配元素html内容 文本值 text()// 取得所有匹配元素内容 text(val...)// 设置所有匹配元素内容 值 val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素val([val1, val2])// 设置多选checkbox、多选select

6.7K10

动态增加表单元素获取元素text和value提交

问题关键在于动态添加表单和如何获取表单text和value分别根据要求进行拼接。...$("#addformbody").remove(); }); form.render(); }); 然后是在提交时候获取表单所有的...text和value进行拼接,由于这里使用layui,他select和显示并不在一起,具体见layui-select,这就给工作造成了很大困难,这里就要用next,eq(),children()...思路就是每个追加条件都是三个表单元素构成,他们都在一个div,根据这些div相同class获取到这些数据然后遍历每个div,在其中用各种选择器获取他们text和value,进行拼接,发送给后台...(); var v=$(".f_val").eq(i).val(); var fv = $("select

3.5K110

Web阶段:第五章:JQuery库

获取最后个元素 :not(selector) 去除所有与给定选择器匹配元素 :even 匹配所有索引值为偶数元素 0 开始计数 :odd 匹配所有索引值为奇数元素 0 开始计数 :eq(... Jquery 属性操作 html() 跟innerHTML一样。 设置和获取起始标签和结束标签内容 text() 跟innerText一样。...设置和获取起始标签和结束标签文本 val() 跟value属性一样。 专门用来操作表单项value属性。...**bind()** 可以同时给标签绑定一个多个事件 **one()** 给标签绑定只响应一次事件 **live()** live可以给匹配了选择器所有元素都绑定事件,哪怕这个元素是后面动态创建...我们重点关心是怎么拿到这个javascript事件对象。以及使用。 如何获取呢javascript事件对象呢?

26.2K20

Web前端基础(07)

###属性选择器 $(“div[id]”) 匹配包含id属性div $(“div[属性名=‘xxx’]” 匹配指定属性名=xxxdiv $(“div[属性名!=‘xxx’]”)匹配指定属性名!...$(“div:nth-child(n)”) 匹配是div并且是第n个而且要求元素是子元素 n1 开始 ###表单选择器 $(":input") 匹配所有表单控件 $(":password") 匹配所有密码框...$(":selected") 匹配所有选中下拉选 ###修改页面元素相关 创建及添加元素 创建: var d = $("abc"); 后面添加: 父元素.append...等效innerText 获取元素文本 元素对象.text(); 修改元素文本 元素对象.text(“xxx”); 获取和修改元素html内容 等效innerHTML 获取元素html 元素对象.html...//得到文本框里面的文本 var str = $("input:first").val(); //设置li显示文本 text方法等效jsinnerText li.text(

5K20

Asp.Net MVC4入门指南(6):验证编辑方法和编辑视图

ActionLink是一个帮助方法,便于动态生成指向Controller操作方法HTML 超链接链接。...它们获取影片对象 (对象集合,如Index里对象集合),并将模型传递给视图。Create方法将一个空Movie对象传递给创建视图。...该请求将显示一个 HTML 表单,其中包含输入元素,用户可以输入一部要搜索电影。当用户提交窗体时,操作方法将获取用户输入搜索条件并在数据库搜索。...前几行代码会创建一个List对象来保存数据库电影流派。 下面的代码是数据库检索所有流派 LINQ 查询。...在下一节,您将看到如何将属性添加到Movie模型,以及如何添加一个初始设定并自动创建一个测试数据库。

4.3K100

最常见 20 个 jQuery 面试问题及答案

当你只需要选择一个元素时,使用 ID 选择器,而如果你想要选择一组具有相同 CSS class 元素,就要用 class 选择器。...你可按需修改它,比如用 id 属性而不是 name 属性来获取 标签。   8. jQuery 里 each() 是什么函数?你是如何使用它?...(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。...当你只需要选择一个元素时,使用 ID 选择器,而如果你想要选择一组具有相同 CSS class 元素,就要用 class 选择器。...(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。

13.7K30

第83天:jQuery操作form表单

细节参考:http://api.jquery.com/prop/ 2、 值和内容 val()方法: 作用:设置返回表单元素值,例如:input,select,textarea值 // 获取匹配元素值...,只匹配第一个元素 $(selector).val(); // 设置所有匹配到元素值 $(selector).val(“具体值”);  text() 方法: 作用:设置获取匹配元素文本内容 //...$(selector).text(); //设置操作带参数,参数表示要设置文本内容 // 如果设置内容包含html标签(我要动态创建span,这时候行吗?...),那么text这个方法会把他们当作文本内容输出,而不会创建元素。...$("input").val("我是刚刚赋值input"); 6 //text() 7 alert($("div").text());//获取双闭合标签文本

89820
领券