Добавить уникальный идентификатор в список пунктов меню

Я пытаюсь получить другое изображение, которое появляется, когда нажимается эта страница, или что «активный» может быть динамическим, используя javascript/jQuery. Я хотел бы поместить уникальный идентификатор для каждого li и использовать javascript.Добавить уникальный идентификатор в список пунктов меню

Я очень новичок в javascript и не знаю, с чего начать. Любая помощь будет большой. Благодарю.

<ul data-identifier="50dd2c0b-3904-4100-9076-627145a3a949" class="active nav-edit " id="nav-main-menu"> 
    <li class=" nav-link active "> 
     <a href="/about" data-toggle="" class=" nav-link active ">ABOUT </a> 
    </li> 
    <li> 
     <a href="/teachers" data-toggle="" class=" nav-link ">FOR TEACHERS </a> 
    </li> 
     <li><a href="/students" data-toggle="" class=" nav-link ">FOR STUDENTS </a> 
    </li> 
    <li><a href="/parents" data-toggle="" class=" nav-link ">FOR PARENTS </a> 
    </li> 
    <li><a href="/contact" data-toggle="" class=" nav-link ">CONTACT US </a></li> 
    <li><a href="/register" data-toggle="" class=" nav-link ">REGISTER </a></li> 
</ul>

источник

2013-07-09 Marc Brigham

JQuery: Вы можете использовать .each и индекс Инкрементирование в функции обратного вызова:

$("#nav-main-menu li").each(function(index) { 
    $(this).attr("id", "id" + index); 
});

Каждый li теперь будет иметь идентификатор, начиная с id0 до сколь угодно долго список.

источник

2013-07-09 14:54:01 tymeJV

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

Измените исходный идентификатор для идентификатора, а затем, в его нынешнем виде, этот код может использоваться только для этого списка, так как он нацелен на идентификатор. – tymeJV

Я думаю, что это было бы опасно, только если что-то уже не так, что дает идентификатор «nav-main-menu» для нескольких элементов. В противном случае все будет хорошо. – melancia

Вы могли бы попробовать это, если вы не хотите, числовой идентификатора:

$('li').each(function(){ 
    $(this).attr('id',$(this).text().trim().toLowerCase().replace(' ','_')); 
})

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

JSBin Demo

источник

2013-07-09 14:58:53 DarkAjax

Добавить уникальный идентификатор в список пунктов меню

ответ

Смежные вопросы