2010-03-12 4 views
3

Je suis en train d'obtenir tous les éléments d'entrée d'une certaine forme de jQuery en fournissant uniquement le nom de la forme et ne sachant que les individus recherchés champs sont des éléments d'entrée.Obtenir des éléments enfants avec certains tag jQuery

Disons que:

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

Comment puis-je y accéder individuellement avec jQuery? J'ai essayé quelque chose comme $('#formId > input') sans succès, en fait, une erreur est revenu sur la console "XML filter is applied to non-XML value (function (a, b) {return new (c.fn.init)(a, b);})"

Peut-être que je dois le faire avec .children ou quelque chose comme ça? Je suis assez nouveau chez jQuery et je n'aime pas vraiment les Docs. C'était beaucoup plus convivial dans Mootools, ou peut-être que je dois juste m'y habituer. Oh et enfin et surtout, je l'ai déjà vu demander mais pas de réponse finale, puis-je créer un nouvel élément dom avec jQuery et travailler dessus avant de l'insérer (si jamais je le fais) dans le code? En Mootools, nous avions quelque chose comme var myEl = new Element(element[, properties]); et vous pourriez alors faire référence dans d'autres expressions, mais je ne comprends pas comment faire sur jQuery

Ce que je fini par faire était quelque chose comme ceci: $('#where').before("<a id='linkId' href='#'>Link Text</a>") mais cela va à l'encontre de la exigence de travailler avec elle avant de l'insérer si vous savez ce que je veux dire.

Merci d'avance.

Répondre

3

J'espère que cela répond à vos questions.

<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

Voilà comment cela fonctionne:

$('#formId input') 
1

Si vous voulez faire une boucle à travers toutes les entrées, jetez un oeil à la each() function jQuery:

+0

+1 pour m'avoir enseigné les fonctions que, même si je les avais lues, je les ai également oubliées. – johnnyArt

5

Si vous voulez que tous les descendants alors @ œuvres de réponse de Woland . Si vous voulez vraiment que les enfants directs comme indiqué par votre> puis

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

Wolands correspond à nom, prénom et téléphone. La mienne correspond uniquement au nom et au prénom

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

Quelle est la différence alors? '#formId> input' devrait faire le travail. +1 de toute façon, bonne réponse. –

+1

Dans les sélecteurs CSS, la différence entre « entrée #formId> » et « entrée #formId » est que la « > » correspond seulement des éléments qui sont directement en dessous de la #formId dans le DOM. "#formId input" correspond à n'importe quel descendant. L'entrée pourrait être imbriquée dans 15 divs et elle correspondrait toujours. –

Questions connexes