jQuery selection by [attribute*=value] selector is wrong-CodePudding

I need to select elements by a data-attribute, but the selector selects all the elements with "it" but also the elements with word where it is inside like "italy". How can I just select the elements with the term "it" by itself (in this example div one and three)?

$selectedTerm = "it";
$(".team-list-module .modal-wrapper")
  .find('.employee:not([data-term-name*="'   $selectedTerm   '"])')
  .addClass('hidden');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-term-name="all it"></div>
<div data-term-name="all italy"></div>
<div data-term-name="all it espana"></div>
<div data-term-name="all espana it"></div>
<div data-term-name="all espana italy"></div>

CodePudding user response：

You can use ~= instead to match entire class names. This example hides elements that have class it:

$selectedTerm = "it";
$('[data-term-name~="'   $selectedTerm   '"]').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-term-name="all it">a</div>
<div data-term-name="all italy">b</div>
<div data-term-name="all it espana">c</div>
<div data-term-name="all espana it">d</div>
<div data-term-name="all espana italy">e</div>

CodePudding user response：

This isn't possible with just the selectors API. You'll have to iterate through the elements to test against the logic you need.

const selectedTerm = "it";
for (const div of $('[data-term-name]')) {
  const names = div.dataset.termName.split(' ');
  if (!names.includes(selectedTerm)) {
    div.classList.add('hidden');
  }
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-term-name="all it">1</div>
<div data-term-name="all italy">2</div>
<div data-term-name="all it espana">3</div>
<div data-term-name="all espana it">4</div>
<div data-term-name="all espana italy">5</div>

There's no need to include a big library like jQuery for something this trivial, though.

const selectedTerm = "it";
for (const div of document.querySelectorAll('[data-term-name]')) {
  const names = div.dataset.termName.split(' ');
  if (!names.includes(selectedTerm)) {
    div.classList.add('hidden');
  }
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-term-name="all it">1</div>
<div data-term-name="all italy">2</div>
<div data-term-name="all it espana">3</div>
<div data-term-name="all espana it">4</div>
<div data-term-name="all espana italy">5</div>