获取<输入>的属性名称值


134

如何使用jQuery获取输入标签的属性名称值。请帮忙。

<input name='xxxxx' value=1>

Answers:


270

给您的输入一个ID并使用以下attr方法:

var name = $("#id").attr("name");

33

使用这样attr的jQuery方法:

alert($('input').attr('name'));

请注意,您还可以attr通过指定第二个参数来设置属性值:

$('input').attr('name', 'new_name')

18
var value_input = $("input[name*='xxxx']").val();

由于帖子太短/仅是代码,因此该帖子被自动标记为低质量。您是否介意通过添加一些文本来解释它如何解决问题来扩展它?
gung-恢复莫妮卡2014年

2
它实际上并不能解决问题。OP希望获取名称值;这假设您已经知道。
felwithe

16

尽管不能否认jQuery是一个功能强大的工具,但将其用于诸如“获取元素的属性值”这样的琐碎操作确实是一个坏主意。

根据当前接受的答案,我将假定您能够向您的元素添加ID属性,并使用该属性来选择它。

考虑到这一点,这里有两段代码。首先,在“已接受的答案”中提供给您的代码:

$("#ID").attr("name");

其次,是Vanilla JS版本:

document.getElementById('ID').getAttribute("name");

我的结果:

  • jQuery:30万次操作/秒
  • JavaScript:每秒11,000千次操作

您可以在这里进行自我测试。“纯JavaScript” 版本比jQuery版本快35倍以上。

现在,这仅是一项操作,随着时间的流逝,您的代码中将包含越来越多的内容。也许对于特别高级的东西,最佳的“纯JavaScript”解决方案将花费一秒钟的时间。jQuery版本可能需要30秒到一整分钟!太好了!人们不会为此而坐。甚至浏览器也会很无聊,并为您提供了选择花费太长时间来杀死网页的选择!

正如我所说的,jQuery是一个强大的工具,但它应该被视为一切问题的答案


很好的答案,我交叉检查过,所以javascript比jquery更快,对吗?
Rijo

在问了问题四年后,您回答了这个问题,但您没有解决该问题。该人问如何在jQuery中做到这一点。由程序员决定使用jQuery还是Vanilla JS,不在问题的范围内
Zachary Weixelbaum

香草JS!?? 开个玩笑,我花了半个小时研究什么是Vanilla JS hack。
巴希尔·莫曼尼

也许开发人员不知道。我知道jQuery之类的框架会造成一些开销的事实。但是我没想到在使用jQuery时会放慢这种简单的任务,而将因子35放慢了速度
Daniel

7

您需要编写一个选择器,<input>首先选择正确的选择器。理想情况下,您可以使用元素的ID $('#element_id'),但不能使用其容器的ID $('#container_id input')或元素的class $('input.class_name')

您的元素没有这些元素,也没有上下文,因此很难告诉您如何选择它。

一旦找到合适的选择器,就可以使用attr方法访问元素的属性。要获得名称,您将使用$(selector).attr('name')返回的名称(在您的示例中)'xxxxx'


5

更好的方法可能是使用“ this”,它使用“ id”的名称并使用它。只要添加名为“ mytarget”的类名。

每当具有目标更改的任何字段都将显示带有该字段名称的警告框。只需剪切并跳过整个脚本即可使用!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
 $('.mytarget').change(function() {
var name1 = $(this).attr("name");
alert(name1);
 });
});
</script>

Name: <input type="text" name="myname" id="myname" class="mytarget"><br />
Age: <input type="text" name="myage" id="myage" class="mytarget"><br />

1
var theName;

theName = $("input selector goes here").attr("name");

1

使用值获取输入名称

 $('input[value="1"]').attr('name');

使用id获取输入名称

 $('input[class="id"]').attr('name');
   $('#id').attr('name');

使用类获取输入名称

 $('input[value="classname"]').attr('name');
   $('.classname').attr('name');  //if classname have unique value

0

如果您正在处理单个元素,则最好使用idGenericTypeTea答案中所述的选择器,并获得如下名称$("#id").attr("name");

但是,如果想要的话,就像我发现这个问题时所做的那样,可以列出一个特定类的所有输入名称(在我的示例中为一个列出所有未选中复选框的名称的列表.selectable-checkbox),您可以执行以下操作:

var listOfUnchecked = $('.selectable-checkbox:unchecked').toArray().map(x=>x.name);

要么

var listOfUnchecked = [];
$('.selectable-checkbox:unchecked').each(function () {
    listOfUnchecked.push($(this).attr('name'));
});

0

将class传递到输入标签,并使用class访问名称值。

<input class="test-class" name='xxxxx' value=1>

<script>
    $('.test-class').attr('name');
</script>

或者,您也可以使用id访问该值。

<input id="test-id" name='xxxxx' value=1>

<script>
    $('#test-id').attr('name');
</script>

-2

对于下面的代码行,最初面临的问题是没有给出单个代码,即“ currnetRowAppName”值未使用字符串占用空格。因此,在给出单个代码之后'"+row.applicationName+"',其占用空间也很大。

例:

<button class='btn btn-primary btn-xs appDelete' type='button' currnetRowAppName='"+row.applicationName+"' id="+row.id+ >

var viewAppNAME = $(this).attr("currnetRowAppName");
alert(viewAppNAME)

一切正常。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.