Как получить доступ к классу через идентификатор с помощью JQuery?

Question

У меня есть html следующим образом:

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

...

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

</fieldset>

В сценарии java я клонирую набор полей, но я хочу получить доступ к его элементу для изменения идентификаторов и некоторого текста.

Я попробовал это, и это не сработало:

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

Я также хочу иметь возможность доступа ко всем входам внутри набора полей, чтобы изменить их идентификаторы,Любая помощь?

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

Answer 2

Вы можете изменить идентификатор вопроса, используя метод attr :

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

Чтобы отредактировать конкретных потомков в вашем новом элементе, вы хотите найти метод:

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

Answer 3

К клонировать набор полей и добавить его к тому же родительскому элементу:

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

Обратите внимание, что мы меняем идентификатор перед добавлением его в дерево,поскольку у вас не может быть двух элементов с одинаковым идентификатором.

Для работы с элементами внутри него вы можете использовать .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", ...).Но в этом нет особой необходимости, если вы не делаете что-то кроме изменения идентификатора.

---

Отвечая на ваш вопрос о перенумерации идентификаторов, вы должны быть уверены, что обновляете все, что , используя эти идентификаторы, а также фактические идентификаторы на элементах ввода.

Но с точки зрения обновления элементов ввода, вы могли бы делать это, читая число и увеличивая его, пока выполучите тот, который не используется:

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», если исходный идентификатор был «input_radio1», но я думаю, что я бы, вероятно, использовал другое соглашение об именах.Например, вы могли бы поставить префикс ваших различных входных идентификаторов с идентификатором вопроса:

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

... и затем просто заменить «question1» на «question2» в клонированных идентификаторах.(Двоеточие [:] совершенно действительны для идентификаторов.)

Если вы можете избежать использования идентификаторов на всех ваших входах, это будет путь.Например, если ваша разметка не препятствует этому по другой причине, вы можете связать input с его label посредством включения вместо использования for:

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

Множество опций.:-)

Answer 4

Вы можете легко получить доступ к классу, используя этот идентификатор.

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

Answer 5

Метод 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'