Wybierz elementy z atrybutem id, który zaczyna/kończy się określoną wartością

Question

Czy można użyć jQuery lub JavaScript z wyrażeniem regularnym, aby wybrać wiele elementów o podobnym id?

Mam następujące paragrafy:

<p id="item5_2"> A </p> 
<p id="item9_5"> B </p> 
<p id="item14_2"> C </p> 

Chcę zmienić treść ustępów z id począwszy item a kończąc w 2.

użyłem następujące jQuery:

$("#item[\d]*2").html("D"); 

ale to nie działa. Jak mogę go uruchomić?

JSFiddle Demo

Answer 1

Tak to może można połączyć attribute starts with oraz selektora attribute ends with

$('[id^="item"][id$="2"]').html("D"); 

FIDDLE(i trzeba włączyć jQuery na skrzypcach)

nie można użyć wyrażenia regularnego, aby dopasować numery między jednak na to, że trzeba filter()

$('[id^="item"]').filter(function() { 
    return this.id.match(/item\d+_2/); 
}).html("D"); 

Answer 2

Można użyć "zacząć" i "kończy" selektorów świadczonych przez jQuery, jak poniżej.

$("[id^='item'][id$='2']").html("D"); 

Oficjalna dokumentacja:

• Start with selector
• Ends with selector

Answer 3

Ty możliwe, połączyć selektorów atrybutów: fiddle

$("[id^='item'][id$='2']").html("D"); 

Answer 4

Spróbuj

<p id="item5_2"> A </p> 
<p id="item9_5"> B </p> 
<p id="item14_2"> C </p> 

i ...

$('[id^="item"][id$="2"]') 

Answer 5

Najlepszym sposobem jest użycie the following jQuery selectors

^= is starts with 
$= is ends with 

= is exactly equal 
!= is not equal 
*= is contains 

Więc w twoim przypadku:

var $items = $('[id^="item"][id$="2"]'); 

Answer 6

Oto pracuje JS FIDDLE

HTML:

<p id="item5_2"> A </p> 
<p id="item9_5"> B </p> 
<p id="item14_2"> C </p> 
<input type="button" value="Get element ids starting with 'item' and ending with '2'" onclick="get_ids()"> 

JS:

get_ids = function(){ 
    $('[id^="item"][id$="2"]').each(function() { 
     alert($(this).attr('id')); 
    }); 
} 

Answer 7

Można użyć kolejnego kodu, jeśli chcesz robić żadnych innych działań:

$('[id^="item"]').each(function(){ 
    if(this.id.slice(-1) == 2){ 
    //Do something 
    $(this).html('D'); 
    } 

});