Question

HTML：

<div id="div1">
  <div class="row" >
     <div class="span2" >
    <input type=button  value="" name="btn1"/>
    </div>
</div>
</div>

jQuery的：

$(document).ready(function() {
        $('#div1[name="btn1"]').val('test hello');
            });

为什么这不起作用？

其中

  $(document).ready(function() {
            $('[name="btn1"]').val('test hello');
                });

似乎有效，但我有一些其他div需要填充值。

我可以重复使用输入元素的名称，还是必须是唯一的？

Answer 1

您的选择器正在寻找具有属性#div1的{{1}}。试试这个。

name=btn1

Answer 2

您正在使用的选择器正在尝试查找名称属性设置为btn1的DIV。您应该只是按名称查找输入或在DIV中查找具有该名称的输入。请注意，名称不需要是唯一的，尽管ID可以。

 $('#div1 [name="btn1"]').val(...); // the space makes all the difference

如果页面上只有一个带有该名称的元素，您只需使用

即可

 $('[name="btn1"]').val(...);

Answer 3

你已经有了几个有效的解决方案，但我想提出一些建议。为什么不在按钮元素中添加一个类？类似的东西：

<div id="div1">
    <div class="row" >
        <div class="span2" >
            <input type="button" class="-row-button" value="" name="btn1"/>
        </div>
    </div>
</div>

现在，您的选择器只是$(".-row-button").val("test hello");

为什么重要？好吧，DOM遍历非常昂贵，像$("#div1 [name='btn1']")这样的选择器效率远低于类选择器。那是因为#div1和[name='btn1']之间的简单空间意味着jQuery将在#div1下搜索所有级别的子控件。这是件坏事。

即使您的网页非常小，您也应该养成这样做现在的习惯。此更改将使您的jQuery代码：

以后更容易理解和维护
稍微强一些（因为.-row-button类可以从#div1下面移动，你的jQuery代码仍然可以工作）
更快

Answer 4

下面的代码将获取div1下的input元素并将文本设置为“test hello”

 $(document).ready(function() {
    $('#div1').find("input").val('test hello');
  });

在div中按名称选择输入按钮？

HTML：

jQuery的：

4 个答案: