2015-10-30 2 views
2

Проект, в котором я работаю, имеет код, в котором есть несколько подкомпонентов, загружаемых в основной вид, а некоторые из них на самом деле имеют одинаковые идентификаторы.Выберите элемент nth html DOM с тем же ID

Код часть, как показано ниже после загрузки,

<div id="container"> 
    <div></div> 
    ... 
    <div id="subject"></div> 
    .. 
    <div id="some_other"></div> 
    ... 
    <div id="subject"></div> 
    ... 
</div> 
<div id="container2"> 
    <div></div> 
    ... 
    <div id="subject"></div> 
    ... 
    <div id="some_other"></div> 
    ... 
    <div id="subject"></div> 
    ... 
</div> 

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

Так что теперь в моей логике я хочу шкурой некоторый элемент (который имеет идентификатор «предмет») внутри контейнера сНу элемента. Ради вопросов можно сказать, что я хочу скрыть первый div с id 'subject', так как есть несколько элементов с id 'subject'.

Подход, который я попробовал это

containerElt = $("#container"); 
relevantDiv = $("#subject",containerElt); 
relevantDiv.hide(); 

Но это скрыть все элементы внутри контейнера DIV, с идентификатором «предмет». есть ли какой-либо гладкий способ для достижения моего требования.

будет элегантным, если это можно сделать с помощью n-го элемента. Но это более чем достаточно, чтобы кто-то мог показать мне, как это сделать для первого div с id «subject».

+11

ID ** должны ** быть _unique_ ** ВСЕГДА ** – Tushar

+4

ID ** должны ** быть уникальным – guradio

+1

'$ ('# предмет'). Скрыть()' будет скрывать ** first ** element – Tushar

ответ

1

См JSFiddle https://jsfiddle.net/tf1qyr4m/

Чтобы получить п-ю использовать элемент .eq (индекс) - индекс равен нулю основе. So:

relevantDiv = $('[id="subject"]').eq(0); 
relevantDiv.hide(); 

Чтобы скрыть первый.

EDIT: Обратите внимание, что для выбора более первого элемента необходимо использовать $ ('[id = "subject"]').

https://api.jquery.com/eq/

+0

«Чтобы использовать n-й элемент .eq (index) - индекс основан на нулевом значении». делает его общим, со ссылкой на селектор eq и с примером JSFiddle, который фактически скрывает 2-й элемент. –

2

Использование:

containerElt = $("#container"); 
// find the element with `subject` id(first matched element only) 
containerElt.find('[id="subject"]:first').hide(); 
// or 
containerElt.find('[id="subject"]:eq(0)').hide(); 
+0

Это скроет все элементы с этим id, а не то, что хочет OP – Tushar

+0

@Tushar Opps, yess. –

+0

Да, это должно скрыть это. –

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