Как выбрать элементы с использованием jquery на основе суффикса и префикса id?

Question

Я хотел бы, чтобы выбрать элементы с этим рисунком ID:

<div id="prefix_0_sufix"></div> 
<div id="prefix_1_sufix"></div> 
<div id="prefix_2_sufix"></div> 
... and so on ... 

Как я могу получить эти элементы с JQuery селекторы?

Answer 1

Вы можете использовать «атрибут начинается с» и «атрибут с окончаниями» селекторов:

$('div[id^="prefix_"][id$="_sufix"]'); 

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

<div class="foo" data-bar="0"></div> 
<div class="foo" data-bar="1"></div> 
<div class="foo" data-bar="2"></div> 

Оттуда вы можете использовать filter(), чтобы получить конкретный элемент из набора:

var $secondDiv = $('.foo').filter(function() { 
    return $(this).data('bar') == 1; 
}); 

Или, если элементы порядковые, вы могли бы просто использовать свой индекс и не добавить атрибут data на все :

var $secondDiv = $('.foo:eq(1)'); 

Answer 2

$('div[id^="prefix"]').filter(
    function(){ 
     return this.id.match('suffix'); 
    }).css('background-color','#0f0'); 

jQuery Select # id with word as prefix and counter as suffix