2010-03-12 3 views
3

Я пытаюсь получить все элементы ввода из определенной формы из jQuery, указав только имя формы и только зная, что эти желаемые поля являются элементами ввода.Получение элементов детьми с определенным тегом jQuery

Скажем:

<form action='#' id='formId'> 
<input id='name' /> 
<input id='surname'/> 
</form> 

Как получить доступ к ним в индивидуальном порядке с JQuery? я пытался что-то вроде $('#formId > input') без успеха, на самом деле ошибка вернулась на консоли "XML filter is applied to non-XML value (function (a, b) {return new (c.fn.init)(a, b);})"

Может быть, я должен сделать это с .children или что-то подобное? Я довольно новичок в jQuery, и мне не нравятся документы. Это было намного дружелюбно в Mootools, или, может быть, мне просто нужно привыкнуть к этому.

О, и последнее, но не менее важное: я видел, как он спрашивал, но окончательного ответа не могу, я могу создать новый элемент dom с jQuery и работать с ним, прежде чем вставлять его (если я когда-либо) в код? В MooTools, у нас было что-то вроде var myEl = new Element(element[, properties]); и вы могли бы обратиться к нему в дальнейших выражениях, но я не в состоянии понять, как сделать это на JQuery

То, что я в конечном итоге делает что-то вроде этого: $('#where').before("<a id='linkId' href='#'>Link Text</a>") но побеждает требование работать с ним, прежде чем вставлять его, если вы знаете, что я имею в виду.

Заранее спасибо.

ответ

3

Надеюсь, это ответит на ваши вопросы.

<script type="text/javascript"> 

$(document).ready(function() { 
     // Question part 1 
    var formInputs = $("form#formId :input"); 
    formInputs.each(function(index) { 
     alert(index + ': ' + $(this).attr("id") + "=" + $(this).val()); 
    }); 

     // Question part 2 
    var a = $("<a id='linkId' href='#'>Link Text</a>"); 
    a.click(function(){alert("hello")}); 
    $('#where').before(a); 


}); 
</script> 

<form action="#" id="formId"> 
    <input id="name" type="text" value="foo" /> 
    <input id="surname" type="text" value="bar" /> 
    <div> 
    <input id="phone" type="text" value="911"/> 
    </div> 
</form> 
</div> 
<div id="where"></div> 
1

Вот как это работает:

$('#formId input') 
1

Если вы хотите перебрать все входы, посмотрите на each() function в JQuery:

+0

+1 для обучения меня каждой функции, которая хотя и прочитала ее, я также забыл об этом. – johnnyArt

5

Если вы хотите, чтобы все потомки затем @ ответов работы Воланда , Если вы действительно хотите только прямых детей, указанных вами, а затем

$('#form').children('input') 

Wolands соответствует имени, фамилии и телефону. Шахтные спички только имя и фамилия

<form action='#' id='formId'> 
<input id='name' /> 
<input id='surname'/> 
<div> 
<input id='phone'/> 
</div> 
</form> 
+0

В чем же тогда разница? '#formId> input' должен выполнять задание. +1 в любом случае, хороший ответ. –

+1

В селекторах css разница между «#formId> input» и «#formId input» заключается в том, что «>» соответствует только элементам, которые находятся непосредственно под #formId в dom. «#formId input» соответствует любому потомку. Ввод может быть вложен в 15 разделов, и он все равно будет соответствовать. –