Как получить доступ к классу через id с помощью jquery?

Question

У меня есть HTML следующим образом:

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

...

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

</fieldset>

В сценарии Java, я клонировать Fieldset, но я хочу получить доступ его элемент для изменения идентификаторов и часть текста.

Я попробовал это, и это не сработало:

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

Я также хочу, чтобы иметь возможность получить доступ все входы внутри FIELDSET, так, чтобы изменить свои идентификаторы. Любая помощь?

Answer 1

Для clone набора полей и добавить его к тому же родителю:

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 

Примечание мы changing идентификатор перед добавлением его к дереву, так как вы не можете иметь два элемента с одинаковым идентификатором ,

Чтобы сделать вещи с элементами внутри него, вы можете использовать .children() или .find() на вашей clone переменной с селектором для выбора детей/потомков, которые вы хотите (как только вы добавили клон родителя). Например, для очистки id с на входах:

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... */; 
    } 
}); 

Обратите внимание, что в each обратного вызова, this является не экземпляр JQuery, это исходный элемент. (Следовательно, моя настройка this.id напрямую.) Если вы хотите получить экземпляр jQuery для элемента, вы должны сделать var $this = $(this);, а затем вместо этого использовать $this.attr("id", ...). Но нет особой необходимости, если вы не делаете что-то другое, кроме изменения идентификатора.

---

Отвечая на Ваш вопрос о перенумерации идентификаторов, вы должны быть уверены, что вы обновить все, что это с помощью этих идентификаторов, а также фактических идентификаторов на входных элементах.

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

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

... который даст вам «input_radio2», если исходный идентификатор был «input_radio1», но я думаю, что, вероятно, я бы использовал другое соглашение об именах. Например, вы можете использовать префикс ваши различные входные идентификаторы с идентификатором вопроса:

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

... а затем просто заменить «Question1» с «» question2 в клонированных идентификаторов. (Colons [:] отлично подходят в идентификаторах.)

Если вы можете избежать идентификаторов на всех ваших входах, тем не менее, это будет путь. Например, если ваша разметка не мешает ему по другой причине, вы можете связать input с его label через сдерживание, а не с помощью for:

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

Много вариантов. :-)

Answer 2

JQuery html метод имеет синтаксис выглядит следующим образом:

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

Вы можете изменить идентификатор вопроса с помощью метода attr:

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

Для редактирования конкретных детей в вашей новой элемент, вы хотите find метод:

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

Answer 4

Попробуйте это:

$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");