comment accéder à une classe via id en utilisant jquery?

Question

J'ai un html comme suit:

<fieldset id="question1"> <legend class='legend'>...</legend>

...

<input type="text" name="label_no1" id="label_no1" autocomplete="off">

</fieldset>

Sur le script java, je clonant le fieldset, mais je veux accéder à son élément pour changer les identifiants, et une partie du texte.

J'ai essayé et cela n'a pas fonctionné:

$('#question1").siblings(".legend").html="any text"; \\ I also tried children

Je veux aussi pouvoir accéder à toutes les entrées à l'intérieur du fieldset, afin de changer leur carte d'identité. Toute aide?

Answer 1

Pour clone le fieldset et l'ajouter à la même parent:

var fieldset = $("#question1"); // Get the fieldset 
var clone = fieldset.clone();  // Clone it 
clone.attr("id", "question2");  // Set its ID to "question2" 
clone.appendTo(fieldset.parent()); // Add to the parent 

Remarque nous sommes changing l'ID avant de l'ajouter à l'arbre, puisque vous ne pouvez pas avoir deux éléments avec le même ID .

Pour faire des choses avec les éléments à l'intérieur, vous pouvez utiliser .children() ou .find() sur votre variable clone avec un sélecteur pour sélectionner les enfants/descendants que vous voulez (une fois que vous avez ajouté le clone au parent). Par exemple, pour nettoyer les id s sur les entrées:

clone.find('input').each(function() { 
    if (this.id) { 
     // It has an ID, which means the original had an ID, which 
     // means your DOM tree is temporarily invalid; fix the ID 
     this.id = /* ...derive a new, unique ID here... */; 
    } 
}); 

Notez que dans le rappel each, this est pas une instance jQuery, il est l'élément brut. (D'où ma configuration this.id directement.) Si vous vouliez obtenir une instance jQuery pour l'élément, vous feriez var $this = $(this); et ensuite utiliser $this.attr("id", ...) à la place. Mais il n'y a pas de besoin particulier sauf si vous faites quelque chose d'autre que de changer l'ID.

---

répondre à votre question sur les ID renumérotation, vous devez être sûr de mettre à jour ce qui est en utilisant ces ID ainsi que les ID réels sur les éléments d'entrée.

Mais en termes de faire la mise à jour sur les éléments d'entrée, vous pourrait le faire en lisant le nombre et incrémenter jusqu'à ce que vous obtenez qui ne soit pas utilisé:

clone.find('input').each(function() { 
    var id; 
    if (this.id) { 
     id = this.id; 
     do { 
      id = id.replace(/[0-9]+$/g, function(num) { 
       return String(Number(num) + 1); 
      }); 
     } 
     while ($("#" + id).length > 0); 
     this.id = id; 
    } 
}); 

... qui vous donnera "input_radio2" si l'ID original était "input_radio1", mais je pense que j'utiliserais probablement une convention de nommage différente à la place. Par exemple, vous pouvez préfixer vos différents identifiants d'entrée avec l'ID de la question:

<fieldset id='question1'> 
    ... 
    <input id=-'question1:input_radio1' /> 
</fieldset> 

... puis il suffit de remplacer « Question1 » par « Question2 » dans les ID clonés. (Colons [:] sont parfaitement valides dans les ID.)

Si vous pouvez éviter d'avoir des ID sur toutes vos entrées, ce serait la solution. Par exemple, à moins que votre balisage empêche pour une autre raison, vous pouvez associer un input avec son label par confinement plutôt que d'utiliser for:

<label>First name: <input type='text' ... /></label> 

Beaucoup d'options. :-)

Answer 2

La méthode jQuery html a une syntaxe comme suit:

var result = $(selector).html(); // result now contains the html of the first matched element 

@(selector).html('some html markup'); // the html of all matched elements are set to 'some html markup' 

Answer 3

Vous pouvez modifier l'identifiant de la question en utilisant la méthode attr:

var q2 = $('#question1').clone(); 
q2.attr('id', 'question2'); 

Pour modifier les enfants spécifiques dans votre nouvelle élément, vous voulez le find méthode:

var legend = q2.find('.legend').html('....'); 

Answer 4

Essayez ceci:

$clone = $('#question1').clone(); 

$clone.attr('id','some_new_id'); 
// you don't need to search by class or id you can search for tags also, 
// so you can get rid of some redundancy and write <legend>…</legend> 
// instead of <legen class="legend">…</legend> 
// siblings won't work with your example, because legend is a child not a sibling 
// html= won't work either html on a jQuery object is a method not an attribute 
$clone.find('legend').html("New text for the Legend");