Выберите только один DIV на основе строки

Question

Программа образования Я работаю над содержит курсы, и каждый курс имеет по крайней мере один категории и курс номер. Звучит просто в теории, но когда программа изначально была написана, не было возможно, чтобы курс имел более одной категории. В результате на домашней странице показаны те же самые курсы, которые перечислены несколько раз, только с другим тегом категории (только в HTML). Это вводит в заблуждение для пользователя.

Вместо того, чтобы переписывать всю структуру, которая займет у меня много дней (я довольно свежий разработчик), я хочу использовать jQuery, чтобы просто «скрыть» все остальные div.

HTML-пример компоновки:

<div id="cat_2_10" class="occurenceItem occurence_2" style="display: block;"></div> 
<div id="cat_3_10" class="occurenceItem occurence_3" style="display: block;"></div> 
<div id="cat_6_10" class="occurenceItem occurence_6" style="display: block;"></div> 

В этом примере есть 3 вхождений одного и того же курса (конечно номер 10), в категории 2, 3 и 6. Эти 3 дивы содержат ссылку на точно такой же курс, поэтому нет смысла показывать все 3.

Есть ли способ, которым я могу использовать селектор jQuery, чтобы убедиться, что только один из каждого курса виден? Помните, что категория не имеет значения. Каждый «_», за которым следует номер курса, должен быть уникальным. В тот момент, когда один берется, остальные должны иметь стиль = "display: none".

Answer 1

Я считаю, что это будет делать то, что вы хотите:

var courses = []; 
 
$('.occurenceItem').filter(function() { 
 
    if ($.inArray(this.id.split('_').pop(), courses) === -1) { 
 
     courses.push(this.id.split('_').pop()); 
 
    } else {return this} 
 
}).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="cat_2_10" class="occurenceItem occurence_2" style="display: block;">cat_2_10</div> 
 
<div id="cat_3_10" class="occurenceItem occurence_3" style="display: block;">cat_3_10</div> 
 
<div id="cat_6_10" class="occurenceItem occurence_6" style="display: block;">cat_6_10</div> 
 

 

 
<div id="cat_7_4" class="occurenceItem occurence_2" style="display: block;">cat_7_4</div> 
 
<div id="cat_8_4" class="occurenceItem occurence_3" style="display: block;">cat_8_4</div> 
 
<div id="cat_9_4" class="occurenceItem occurence_6" style="display: block;">cat_9_4</div>

Answer 2

Это может работать:

var ids = []; 
$('.occurenceItem').each(function() { 
    var id = $(this).attr('id').split('_').pop(); 
    if (ids.indexOf(id) < 0) { 
     $(this).show(); 
     ids.push(id); 
    } else { 
     $(this).hide(); 
    } 
}); 

Answer 3

Это похоже на работу.

for (var i = 0; i < 20; i++) { 
    $("[id^=cat_][id$=_" + i + "]").hide().first().show(); 
} 

//[id^=cat_] -> id begins with cat_ 
//[id$=_ + i] -> id ends with _i 

Обратите внимание, что здесь, я предполагаю, что курсы Идентификаторы в диапазоне от 0 до 20. Я не уверен, сколько курсов есть, но я полагал, что делает простой цикл будет достаточно простым и эффективным.

Если вы не хотите перебирать «несуществующие курсы», вам нужно будет построить массив курсивых идентификаторов, а затем прокрутить их.

jsFiddle