如何使用jquery通过id访问一个类？答案

【问题标题】：how to access a class through id using jquery?如何使用jquery通过id访问一个类？
【发布时间】：2010-06-24 12:26:16
【问题描述】：

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

【问题讨论】：

有点不清楚您要做什么。你为什么要克隆字段集——你想把它插入到别的地方吗？您需要在克隆的字段集中进行哪些更改？
关于如何通过id访问课程的部分，我得到了有效的答案，谢谢大家的快速响应。但是我仍然需要有关如何访问在字段集中找到的输入的帮助，我是否必须为每个输入添加类，然后使用 attr 方法更改其 id？
是的，您必须更改输入上的 ID，但不，您不需要在它们上放置类来执行此操作。我已经更新了我的答案以展示如何做到这一点。

标签： jquery class fieldset

【解决方案1】：

试试这个：

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

【讨论】：

@zeina：如果字段集的内容有 id s，那么您将需要清理它们，除非它们被替换，因为它们在里面legend 元素。您问题中的 HTML sn-p 将它们放在 legend 元素之外（并且它们有 id s），所以虽然它会让你接近，但它不会完全做到这一点。

【解决方案2】：

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

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

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

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

【讨论】：

谢谢德克斯特，你的方法奏效了。现在，如果我想更改字段集中输入的 id，您知道该怎么做吗？请注意，我里面有很多输入。
一个小错字：$('#question1").clone(); 应该是 $('#question1').clone(); 你用双引号关闭了一个单引号字符串

【解决方案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 的元素。

要处理其中的元素，您可以在 clone 变量上使用 .children() 或 .find() 和选择器来选择您想要的子/后代（一旦您将克隆添加到父)。例如，清理输入上的ids：

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，那将是可行的方法。例如，除非您的标记出于其他原因阻止它，否则您可以通过包含而不是使用 for 将 input 与其 label 关联：

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

很多选择。 :-)

【讨论】：

@zeina：大声笑，当您发布该问题时，我只是在回答您之前的问题。我的解决方案类似，但要防止冲突。但我认为可能值得退后一步，稍微重构一下表单（他说，对需求一无所知！）。 :-)
非常感谢。最后一个问题，如果我想删除克隆，我该怎么做？只是设置为隐藏？我怀疑是否有更好的方法。
@zeina：你的意思是，如果你想在某个时候删除克隆？只需拨打$("#idOfClone").remove()：api.jquery.com/remove
谢谢，你今天教了我很多关于 jquery 的新东西。谢谢你的时间。

【解决方案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'

【讨论】：

【解决方案5】：

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

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

【讨论】：