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

我还希望能够访问fieldset中的所有输入，以便更改它们的ID。有什么帮助吗？

Answer 1

您可以使用 attr 方法更改问题的ID：

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

要修改新元素中的特定子元素，您需要 find 方法：

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

Answer 2

试试这个：

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

Answer 3

将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

请注意，在将ID添加到树之前，我们是changing ID，因为您不能拥有两个具有相同ID的元素。

要使用其中的元素执行操作，您可以使用clone变量上的.children()或.find()使用选择器选择所需的子项/后代（一旦您使用了）将克隆添加到父级）。例如，要清理输入上的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", ...)。但除非你做的事情不是改变身份证，否则没有特别需要。

回答有关重新编号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; } });

...如果原始ID是“input_radio1”，它会给你“input_radio2”，但我想我可能会使用不同的命名约定。例如，您可以在各种输入ID前加上问题的ID：

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

...然后在克隆的ID中将'question1'替换为'question2'。（冒号[:]在ID中完全有效。）

如果您可以避免在所有输入上使用ID，那么这将是最佳选择。例如，除非您的标记因其他原因而阻止，否则您可以将input与其label相关联，而非使用for：

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

很多选择。 :-)

Answer 4

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 5

您可以使用此ID轻松访问课程。

document.querySelector('#player-0-panel').classList.toggle('active');
document.querySelector('#player-1-panel').classList.toggle('active');

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

5 个答案: