search for text in classes using filter

I have this html:

<td class="catName" data-bs-toggle="collapse" data-bs-target=".category1">A</td>
<td class="catName" data-bs-toggle="collapse" data-bs-target=".category2">B</td>
<td class="catName" data-bs-toggle="collapse" data-bs-target=".category3">C</td>

I want to use the filter function to find the class that has the innerText "A".

Trying with:

jQuery(".catName").filter(item => jQuery(item).text() == "A");

But it doesn't work.

I am using Jquery. I have to use filter. And I have to use an arrow function.

1. Due to your markup being invalid stands nothing will work. You need to add some corresponding table elements.

2. The first argument of filter is index, and item is the second argument (which is the opposite way native JS array methods work).

In this example I'm filtering the cell with "A" and turning its background red.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(".catName").filter((index, item) => {
  return $(item).text() == "A";
}).css('background-color', 'red');

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category1">A</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category2">B</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category3">C</td>
    </tr>
  </tbody>
</table>

<!-- end snippet -->

In pure JavaScript (without jQuery):

• use .querySelectorAll() to get a NodeList of the targeted selector elements
• use Array.from() or using the Array spread ... syntax convert the NodeList into an Array
• use Array.prototype.filter() with Arrow Function to iterate every Element in your Array and filter it by a specified boolean statement (into a new Array). From that point on you can use Array.prototype.forEach() to iterate your filtered Array of Elements:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const elsCatName = document.querySelectorAll(".catName");
const catName_A = [...elsCatName].filter(el => el.textContent === "A");

// Use in example like:
catName_A.forEach(el => el.style.color = "red");

<!-- language: lang-html -->

<table>
  <tbody>
    <tr>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category1">A</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category2">B</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category3">C</td>
    </tr>
  </tbody>
</table>

<!-- end snippet -->

For completeness, in jQuery the above could be expressed like:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(".catName").filter((i, el) => el.textContent === "A").css({color: "red"});

<!-- language: lang-html -->

<table>
  <tbody>
    <tr>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category1">A</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category2">B</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category3">C</td>
    </tr>
  </tbody>
</table>

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

<!-- end snippet -->

or, if you need a lazy matching approach (might match "XXA" as well) — the jQuery's :contains() Selector

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(".catName:contains('A')").css({color: "red"});

<!-- language: lang-html -->

<table>
  <tbody>
    <tr>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category1">A</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category2">B</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category3">C</td>
      <td class="catName" data-bs-toggle="collapse" data-bs-target=".category3">XXAZZ</td>
    </tr>
  </tbody>
</table>

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

<!-- end snippet -->

At a minimum <td> elements need to be wrapped inside <table> element tags for it to make sense to the DOM.

The other thing you need to change is that the JQuery filter() methods receives the index first, and the JQuery item as the second argument. So you need filter((i, item) =>

$(".catName").filter((i, item) => $(item).text() == "A");

See JSFiddle for full example:
https://jsfiddle.net/Lexdp7rt/