1

我有一个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。有什么帮助吗？

4

5 回答 5

2

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

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

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

var legend = q2.find('.legend').html('....');
于 2010-06-24T12:33:00.033 回答
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>…&lt;/legend>
// instead of <legen class="legend">…&lt;/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");
于 2010-06-24T12:37:48.467 回答
1

要克隆字段集并将其添加到同一个父级：

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 添加到树之前更改了 ID，因为您不能有两个具有相同 ID 的元素。

要处理其中的元素，您可以使用.children()或.find()在您的clone变量上使用选择器来选择您想要的子/后代（一旦您将克隆添加到父级）。例如，要清理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;
    }
});

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

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

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

但是，如果您可以避免在所有输入上都有 ID，那将是可行的方法。例如，除非您的标记出于其他原因阻止它，否则您可以将 aninput与其label通过包含关联，而不是使用for：

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

很多选择。:-)

于 2010-06-24T12:33:46.830 回答
0

jQueryhtml方法的语法如下：

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'
于 2010-06-24T12:30:12.410 回答
0

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

document.querySelector('#player-0-panel').classList.toggle('active');
document.querySelector('#player-1-panel').classList.toggle('active');
于 2019-04-12T17:28:32.160 回答