Как использовать одинаковый id на разных вкладках (nav tabs)?

Question

[aaltw]

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <div id='my-id'></div>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <div id='my-id'></div>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <div id='my-id'></div>
  </div>
</div>

Это стандартный код отсюда - https://getbootstrap.com/docs/5.0/components/navs-tabs/ . Я лишь добавил в тело каждой вкладки следующий код:
<div id='my-id'></div>

При такой реализации выходит, что на странице будет 3 элемента с одинаковым id. Хотя визуально я никогда не буду находиться более, чем на одной из этих вкладок. Из-за этого мне приходится для каждой вкладки выдумывать свой префикс для id, чтобы они отличались.

Есть ли для этого более адекватное решение? В реальном коде все элементы с одинаковым id приходят, конечно, после рендера и т.д., поэтому я передаю нужный префикс в него, но из-за этого код этих добавляемых элементов становится слабо читабельным из-за конструкций типа "##{prefix}-my-id" и прочего.

Comments

[Антон Литвиненко]

а цель то этого какая?

[Леонид]

почему вместо id не использовать класс?

[aaltw]

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

Леонид, потому что я наоборот хочу избавиться от единого поведения.

[Антон Литвиненко]

aaltw, я ещё раз перечитал вопрос и комментарий и понятнее мне не стало. Но.
На странице не может быть одинаковых id. Любой код как вы говорите будет отрабатывать только на одном из них.
Если вы таки объясните чего хотите достичь, то может тогда смогу подсказать

[aaltw]

Антон Литвиненко,

На странице не может быть одинаковых id

Да, я понимаю. Поэтому я хотел бы, чтобы каждое тело каждой вкладки считалось бы отдельной страницей.

Допустим, есть бутстраповский аккордеон. Я беру и вставляю на каждую вкладку одинаковый код этого аккордеона. Теперь я нажимаю на аккордеон на вкладке 1, он открывается, перехожу на вкладку 2 и там уже открытый аккордеон. Логично. ID же и все прочее у этих аккордеонов одинаковые.

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

Но:
1) Я не хочу заменять содержимое вкладок или как-то их обновлять при переходах на другие вкладки. Мне важно сохранять данные на каждой. Т.е. что-то типа $('.tab-content').html('<вкладка на которую кликнули>') мне не подходит.
2) Я не хочу иметь разные id элементов на всех вкладках.

[aaltw]

Антон Литвиненко, Для jquery эвентов я нашел следующее:

$( '<element>', '#home' )
$( '<element>', '#profile' )
$( '<element>', '#contact' )

Т.е. таким образом мне нет надобности давать отдельный идентификатор элементу и я могу достать его с помощью ID вкладки. Т.е. область ограничена и ничего лишнего.

А вот что делать с элементами типа бутстраповского аккордеона я пока не знаю.

[Антон Литвиненко]

aaltw, чем больше вы пишете, тем сложнее это воспринимается.
но я приведу пример. вот достаточно простой код для табов на джейквери, которым я пользуюсь бывает в проектах, никаких id и связок по id

// Табы в описании одиночного товара
$('.product-tab-item').not(':first').hide();
$('.product-description .product-tab').on('click', function() {
	$('.product-description .product-tab').removeClass('active').eq($(this).index()).addClass('active');
	$('.product-tab-item').hide().eq($(this).index()).fadeIn();
}).eq(0).addClass('active');

[aaltw]

Антон Литвиненко, это код переключения вкладок? Bootstrap tabs это сами делают, у меня к ним вопросов вообще нет., там пусть будут и должны быть разные id.

Речь конкретно про эту часть кода:

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <select id='my-id'></select>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <select id='my-id'></select>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <select id='my-id'></select>
  </div>
</div>

Вот это 3 тела 3 разных вкладок. Пишу я, например:
$('#my-id').select2();
Инициализируется только первый селект с первой вкладки. Поэтому я должен ограничить область:
$('select', '<tab-id>').select2();
Теперь все 3 селекта на всех трех вкладках будут инициализированы.

Вот теперь у меня одинаковые элементы на каждой вкладке, но я обращался к ним как к разным. Да, это и через класс сработало бы, наверное, но тут уже не важно.

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

<div class="accordion" id="accordionExample">

<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">

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

[Антон Литвиненко]

aaltw, очевидно, что для трех одинаковых элементов чтобы запустить select-2 надо использовать класс. Ну не валидно одинаковый ID на странице!
далее. вы пытаетесь избавиться от связки по id и не хотите писать префиксы, точнее правильнее будет писать порядковые номера. Но дело в том что это так и работает. Если бы мне нужно было использовать бутстраповский аккордеон в динамике например при посадке на вордпресс и я не знаю сколько будет ячеек как по вашему я это буду делать? я запущу цикл и на каждой итерации буду прибавлять к айдишнику значение счетчика id="collapse-<?php echo $i ?>" и то же самое в data-target. Это так и работает, это так и задумано, а вы выдумываете какойто костыль

[aaltw]

Антон Литвиненко,

Если бы мне нужно было использовать бутстраповский аккордеон в динамике например при посадке на вордпресс и я не знаю сколько будет ячеек как по вашему я это буду делать?

Так речь не про один аккордеон, его то содержимое логично по разным id разбивать, это да.

У меня же 3 одинаковых аккордеона на 3 разных бутстраповских вкладках. Если я открою один - откроются все, закрою один - закроются все. А я хочу, чтобы действия с одним не отражались на других, т.к. они находятся в разных вкладках, в разных родителях. Но да, на одной странице. Поэтому и ищу как это ограничить.

[Антон Литвиненко]

aaltw, да хоть сто. делайте как вам удобнее, я устал толочь воду

[aaltw]

Антон Литвиненко, ну как-будто кто-то заставлял, я сразу сказал, что понимаю что такое id, какой смысл мне это было повторять. Вопрос то с этим никак не связан.