如何使用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

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

要使用其中的元素执行操作，可以在.children()变量上使用.find()或clone，使用选择器选择所需的子项/后代（一旦将克隆添加到父项）。例如，要清理输入上的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，那么这将是最佳选择。例如，除非您的标记因其他原因而阻止它，否则您可以通过包含而不是使用input将label与其for相关联：

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

很多选择。 :-)

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

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

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

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

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

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