如何使用jquery通过id访问类？

Question

我有一个HTML如下：

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

...

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

</fieldset>

在Java脚本，我克隆的字段集，但我想访问其元素来改变ID和一些文字。

我尝试这样做，也没有工作：

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

我也希望能够访问该字段集里面所有的投入，所以要改变它们的ID。 有什么帮助吗？

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的ID将它添加到树前，因为你不能有相同的ID两个元素。

做事情与其中的元素，你可以在你clone变量使用.children()或.find()有一个选择，选择你想要的孩子/后代（一旦你已经添加了克隆到父）。例如，为了清理id S于输入：

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", ...)。但没有特别的需要，除非你改变ID以外的事情。

---

回答你的问题有关重编的ID，你需要确保你使用更新的的ID以及实际的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”，如果原始ID是“input_radio1”，但我想我可能会使用不同的命名约定。举例来说，你可以用这个问题的ID前缀您的各种输入标识：

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

...然后只需更换“问题1”与“问题2”在克隆标识。 （Colons [:]在ID中是完全有效的。）

但是，如果您可以避免在您的所有输入上都有ID，那就是要走的路。举例来说，除非你的标记防止其出于不同的原因，你可以通过遏制其label的input而不是使用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方法改变问题的ID：

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