jQuery: додайте ID до нового згенерованого елемента DOM

Отже, у мене є розділ з класом ngg-навігація . Мені потрібно було додати ідентифікатор до нього за допомогою jQuery, тому що я не можу торкнутися HTML безпосередньо. Ось що я мав:

    jQuery(function($){
        $('.ngg-navigation').attr('id', 'ngg-navigation-id');
    });

Це чудово працює з початковим завантаженням, але існує ще один JavaScript, який робить AJAX і оновлює розділ div, що призведе до зникнення ідентифікатора ngg-navigation-id . Чи є спосіб додавання ідентифікатора кожного разу, коли він з'являється?

0
На кожній сторінці є лише один .ngg-навігація . Існуючий видаляється і замінюється новим. Мені потрібно додати ідентифікатор, тому що мені потрібно перезаписати плагін CSS. Він використовує ! Important , і єдиний спосіб перезаписати це, будучи більш конкретним.
додано Автор Edmund, джерело
На кожній сторінці є лише один .ngg-навігація . Існуючий видаляється і замінюється новим. Мені потрібно додати ідентифікатор, тому що мені потрібно перезаписати плагін CSS. Він використовує ! Important , і єдиний спосіб перезаписати це, будучи більш конкретним.
додано Автор Edmund, джерело
@ RocketHazmat працював чудово. Якщо ви зробите це відповіддю, я його прийму
додано Автор Edmund, джерело
@ RocketHazmat працював чудово. Якщо ви зробите це відповіддю, я його прийму
додано Автор Edmund, джерело
Єдиний спосіб - повторно запустити цю лінію кожного разу, коли елемент буде знову додано. Примітка. Чи є лише один елемент $ ('. Ngg-навігація') ? Якщо так, то чому дайте йому ідентифікатор? Якщо ні, переконайтеся, що ваші ідентифікатори є унікальними . Кілька елементів не можуть мати однаковий ідентифікатор.
додано Автор Rocket Hazmat, джерело
@ Едмунд: Можливо, ви можете редагувати CSS, щоб більш конкретно посилатися на елемент? Натомість, замість .ngg-навігації {} , спробуйте .some-parent.ngg-navigation {} .
додано Автор Rocket Hazmat, джерело
Чому вам потрібно додати до нього ідентифікатор?
додано Автор lonesomeday, джерело
Навіщо потрібний ідентифікатор? Очевидно, клас досить специфічний, щоб вдарити цей один елемент, тому чому турбуватися про надання йому id?
додано Автор prodigitalson, джерело

9 Відповіді

У коментарях ви кажете, що єдиною причиною, яку ви хочете додати ідентифікатор, є специфіка CSS.

Для цього вам не потрібен ідентифікатор, потрібно просто зробити свій селектор CSS більш конкретним.

Замість того, щоб робити:

.ngg-navigation{
}

Спробуйте зробити це більш конкретним, додавши до нього батьків. Люблю:

#parent-element .ngg-navigation{
}
2
додано

У коментарях ви кажете, що єдиною причиною, яку ви хочете додати ідентифікатор, є специфіка CSS.

Для цього вам не потрібен ідентифікатор, потрібно просто зробити свій селектор CSS більш конкретним.

Замість того, щоб робити:

.ngg-navigation{
}

Спробуйте зробити це більш конкретним, додавши до нього батьків. Люблю:

#parent-element .ngg-navigation{
}
2
додано

Просто перетягніть це в функцію, і зателефонуйте, коли вам потрібно:

function setId(){
    $('.ngg-navigation').attr('id', 'ngg-navigation-id');

   //you may want to consider this, as its faster:
   //$('.ngg-navigation)[0].id = 'ngg-navigation-id';
}

Ви можете викликати це на завантаженні сторінки (як ви робите), зворотний виклик із виклику AJAX, коли ваш кість відчуває занепокоєння ... незалежно.

$(function(){
    setId();

    $.ajax({
        ...
        success:function(){
            setId();
        }
    });
});

Це також передбачає, що у вас є лише один елемент з класом ngg-навігація , в іншому випадку ви отримаєте недійсний HTML.

Ви також можете зробити його трохи більш багаторазовим, виконуючи параметри:

function setId($item,newID){
    $item.attr('id',newID);

   //or the faster alternative:
   //$item[0].id = newID;
}

І дзвінок:

setId($('.ngg-navigation'),'ngg-navigation-id');

Таким чином, ви можете передати в будь-який інший об'єкт jQuery об'єднання/ідентифікатор, і він встановить ваш ідентифікатор для вас. Просто їжа для думки.

1
додано

Як інші згадували, ідентифікатор здається непотрібним, оскільки ви можете посилатися на елемент за назвою класу. Мабуть, це перший або єдиний елемент із цим класом. Ви завжди можете посилатися на це як:

$('.ngg-navigation').first()

Кожного разу, коли вам потрібно працювати з цим елементом, ви завжди можете, в той час, додати ідентифікатор.

Однак, якщо ви хочете, ви можете вивчити jQuery ajaxComplete , щоб зареєструвати обробника, який потрібно викликати, коли Ajax Запити заповнені.

Виходячи з вашого недавнього коментаря, хоча, якщо вам потрібно перевизначити css, ви можете використовувати jQuery для цього, встановивши потрібні вам правила; це перевизначить його поточний CSS.

0
додано

Як інші згадували, ідентифікатор здається непотрібним, оскільки ви можете посилатися на елемент за назвою класу. Мабуть, це перший або єдиний елемент із цим класом. Ви завжди можете посилатися на це як:

$('.ngg-navigation').first()

Кожного разу, коли вам потрібно працювати з цим елементом, ви завжди можете, в той час, додати ідентифікатор.

Однак, якщо ви хочете, ви можете вивчити jQuery ajaxComplete , щоб зареєструвати обробника, який потрібно викликати, коли Ajax Запити заповнені.

Виходячи з вашого недавнього коментаря, хоча, якщо вам потрібно перевизначити css, ви можете використовувати jQuery для цього, встановивши потрібні вам правила; це перевизначить його поточний CSS.

0
додано

Я думаю, ви можете додати якийсь код, який, при кожному оновленні div, робить вашу замінювальну дію.

0
додано

Я думаю, ви можете додати якийсь код, який, при кожному оновленні div, робить вашу замінювальну дію.

0
додано

Я думаю, ви можете обернути свій DIV в інший, і застосувати ідентифікатор до цього батька DIV.

Таким чином, діти DIV можуть змінюватися і все ще можна знайти за допомогою $ ('# yourID'). Find ('. Ngg-navigation') для прикладу.

Не впевнений, що цей метод є чистим, але він повинен працювати добре і швидко.

0
додано

Я думаю, ви можете обернути свій DIV в інший, і застосувати ідентифікатор до цього батька DIV.

Таким чином, діти DIV можуть змінюватися і все ще можна знайти за допомогою $ ('# yourID'). Find ('. Ngg-navigation') для прикладу.

Не впевнений, що цей метод є чистим, але він повинен працювати добре і швидко.

0
додано