Как я могу использовать селектор jQuery для нацеливания на эти элементы?

Question

Я хочу знать, как написать селектор jQuery для выбора каждого из элементов «ввода» ниже.Я не хочу выбирать их все сразу.Эти поля ввода не будут иметь имен или идентификаторов.Я, вероятно, должен использовать какую-то дочернюю запись, но я не уверен, как это сделать.

<div id="partdiv">
  <div class="floater">
    <input type="text"/> // Some input box with no id or name
  </div>
  <div id="descriptiondiv">
    <div class="floater">
      <input type="text"/> // Some input box with no id or name
    </div>
    <div id="positiondiv">
      <div class="floater"> 
        <input type="text"/> // Some input box with no id or name
      </div>
    </div>
  </div>
</div>

Для первого, например, я попытался:

    $("#partdiv > input").bind(....

но это не сработало.

Answer 1

$("#partdiv > input") говорит, что нужно выбрать вход, который является прямым потомком элемента с идентификатором partdiv. Чтобы найти вход в любом месте под элементом partdiv, вы должны использовать $("#partdiv input"). Тем не менее, это получит все ваши входные данные сразу, так как все они происходят от #partdiv. Поэтому вам нужно будет разбить его дальше:

$( '#partdiv .floater input' ) //gets an input which lives under element with class floater which itself lives under element with ID partdiv

и тд ...

Обратите внимание, что есть много способов снять кожу с этой кошки.

Answer 2

Есть много разных способов сделать это - каждый с разными компромиссами. Вы можете использовать эти селекторы:

"#partDiv input:first"
"#descriptiondiv input:first"
"#positiondiv input"

Или эти:

"#partDiv input:eq(0)"
"#partDiv input:eq(1)"
"#partDiv input:eq(2)"

Или эти:

"#partDiv > .floater > input"
"#descriptiondiv > .floater > input"
"#positiondiv > .floater > input"

Обратите внимание, что "правильный" способ сделать это - присвоить каждому входу свой собственный идентификатор или поместить его в контейнер с идентификатором (без других входных тегов в том же контейнере). Поскольку ни один из них не является истинным, вы должны использовать информацию о положении или иерархии, чтобы определить, какой вход есть какой.

Какой из этих различных методов использовать, зависит от того, насколько тесными или рыхлыми вам нужны отношения между вашей точной структурой HTML и вашими селекторами (например, работает ли селектор с некоторыми типами изменений в HTML или нет).

Преимущество первого варианта в том, что ему не важно, сколько уровней / слоев разметки существует между div и входом, только то, что вы выбираете первый входной элемент в каждом div. Тогда как третий вариант связывает селектор с очень специфической реализацией HTML, и если вы поместите один дополнительный div между partDiv и вводом, он перестанет работать. Первый не переставал бы работать, если бы вы сделали это, поэтому первое и второе гораздо менее хрупки, чем третье.

Преимущество второго варианта в том, что он полностью независим от разметки внутри partDiv. Единственное, что его волнует, это первое, второе и третье поля ввода в этом div.

Основным преимуществом третьего варианта является то, что вы можете изменить порядок трех полей ввода, и селекторы будут работать, пока вы сохраняете уникальность иерархии, указанной в селекторе.

Answer 3

$('input').bind('...

каждый вход будет привязан к желаемому событию (щелчок, изменение, что угодно).

Когда вы находитесь в функции события, «this» соответствует одному входу, где произошло событие. (т. е. тот, который нажал),

в качестве альтернативы вы можете использовать $('input').click(... или $('input').change(...

но я предлагаю вам прочитать документацию по .on(), связующему события, чтобы объединить их всех.

Answer 4

"#partdiv > input" не сработало, потому что вы выбираете непосредственный дочерний элемент «>» только из «#partdiv».

Это будет делать

1st input: $("#partdiv>.floater>input")
2nd input: $("#descriptiondiv>.floater>input")
3rd input: $("#positiondiv>.floater>input")

Я заметил, что твои дивы странным образом завернуты, ты это действительно имел в виду?

Answer 5

Помогает ли это:

$("#partDiv > input").live("click", function() {
  alert($(this).val());
});