Sélectionnez la touche input par nom dans la div?

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');
            });

Pourquoi ne pas ce travail?

Où

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

semble fonctionner mais j'ai d'autres divs dont j'ai besoin pour remplir avec des valeurs.

Puis-je réutiliser un élément de saisie du nom ou doit-elle être unique?

nom des attributs d'Éléments HTML ne sont pas tenus d'être unique.

OriginalL'auteur alex | 2011-11-23

  1. 7

    Votre sélecteur est à la recherche d' #div1 ayant l'attribut name=btn1. Essayez cette.

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

    OriginalL'auteur ShankarSangoli

  2. 3

    Le sélecteur vous utilisez est d'essayer de trouver un DIV avec le nom de l'attribut btn1. Vous devez juste être à la recherche pour l'entrée par nom ou par une entrée avec ce nom dans le DIV. Notez que les noms n'ont pas besoin d'être unique, bien que les id.

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

    Si vous avez seulement un élément de la page avec ce nom, vous pouvez simplement utiliser

     $('[name="btn1"]').val(...);
    tx je suis conscient de cela. Mais j'ai 6 div avec les mêmes noms que les valeurs sont différentes

    OriginalL'auteur tvanfosson

  3. 1

    Vous avez déjà obtenu plusieurs solutions de travail, mais je voudrais proposer quelque chose d'autre. Pourquoi ne pas ajouter une classe à votre élément de bouton? Quelque chose comme:

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

    Maintenant, le sélecteur est juste $(".-row-button").val("test hello");

    Pourquoi est-il important? Eh bien, DOM de la traversée est très cher, et un sélecteur comme $("#div1 [name='btn1']") est beaucoup moins efficace qu'un sélecteur de classe. C'est parce que le simple espace entre #div1 et [name='btn1'] jQuery va de la recherche à travers tous les niveaux de contrôles enfants sous #div1. C'est une mauvaise chose.

    Même si votre page est vraiment petit, vous devriez prendre l'habitude de faire des choses comme cela maintenant. Ce changement rendra votre jQuery code:

    • beaucoup plus facile de suivre et de maintenir plus tard
    • légèrement plus robuste (parce que le .-row-button classe peut passer de la sous #div1 et votre code jQuery fonctionne encore)
    • plus rapide

    OriginalL'auteur jwheron

  4. 0

    Le code ci-dessous obtiendrez l'élément d'entrée en vertu de la div1 et le texte "test bonjour"

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

    OriginalL'auteur Shyju