set div with similar elementId name to show --> jQuery/css

Question

I have the situation to set all div with id "ABC_HK_...._XYZ" to show. I just know for loop all element ID to check as found in getElementById() wildcard

But I do not understand much or different to choose and I want a simple way, e.g Jquery??? I have uncertain varied div with the name, for example, below.. ABC_HK_KWUNTONG_XYZ, ABC_HK_TAIPO_XYZ

I want like $('ABC_HK_[*]_XYZ').style.display="block";

Possible duplicate of [Wildcard search of an elements id using jQuery](https://stackoverflow.com/questions/9284691/wildcard-search-of-an-elements-id-using-jquery) — Ergec, Oct 09 '17 at 18:23
yes, it is solved and have marked the answers. Thanks it is helpful in stackoverflow really — AMMA, Oct 17 '17 at 02:44

score 2 · Answer 1 · answered Oct 09 '17 at 18:20

So you want a selector that matches any element with class starting with ABC_HK_ and ending in _XYZ. Use the following compound to select those:

$('[class ^=ABC_HK_][class $=_XYZ]')

Example:

$('[class ^=ABC_HK_][class $=_XYZ]').addClass('bg-red')

div {
  margin:2px;
  background:#ddd;
  padding:20px;
  display:inline-block;
}
.bg-red {
   background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ABC_HK_KWUNTONG_XYZ">ABC_HK_KWUNTONG_XYZ</div>
<div class="ABC_HK_K_XYZ">ABC_HK_K_XYZ</div>
<div class="ABC_HK_G_XYZ">ABC_HK_G_XYZ</div>
<div class="ABC_XYZ">ABC_XYZ</div>
<div class="ABC_HK_G_XYZ">ABC_HK_G_XYZ</div>
<div class="ABC_HK_KW_XYZ">ABC_HK_KW_XYZ</div>
<div class="ABC_HK_K">ABC_HK_K</div>

score 0 · Answer 2 · answered Oct 09 '17 at 18:20

0

So they all start with ABC_HK_? If that's the case, you can use [id^="ABC_HK_"] to get any element whose ID starts with those characters

answered Oct 09 '17 at 18:20

will

1,947
1
13
19

score 0 · Answer 3 · answered Oct 09 '17 at 18:40

0

You can use the pseudo selectors e.g

 $("[name^=ABC_HK_][name$=_XYZ]").CSS("display","block")

answered Oct 09 '17 at 18:40

Javid Ahmad

48
7

score 0 · Answer 4 · answered Oct 09 '17 at 18:40

The class Equals string

$('div[class="string"').doSomething();
The class Begins with string

$('div[class^="string"').doSomething();
A part of the class is string

$('div[class*="string"').doSomething();
The class Ends with string

$('div[class$="string"').doSomething();

$("div[class^='ABC_HK'][class$='_XYZ']").css("color","red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ABC_HK_TRUE1_XYZ">SHOULD BE COLORED</div>
<div class="ABC_FAKSE_Z">SHOULDN'T BE COLORED</div>
<div class="ABC">SHOULDN'T BE COLORED</div>
<div class="HELLO__XYZ">SHOULDN'T BE COLORED</div>
<div class="ABC_HK_HELLO__XYZ">SHOULD BE COLORED</div>

HERE IS A COMPLETE LIST OF JQUERY SELECTORS

set div with similar elementId name to show --> jQuery/css

4 Answers4