Выберите кнопку ввода по имени в div?

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 с атрибутом name=btn1.Попробуйте это.

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

Answer 2

Используемый селектор пытается найти DIV с атрибутом имени, установленным на btn1. Вы должны просто искать вход по имени или вход с этим именем в DIV. Обратите внимание, что имена не обязательно должны быть уникальными, хотя идентификаторы -.

 $('#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 и установит текст "test hello"

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