jQuery find element :contains, then get class

Question

I am trying to get the class name of this item but it keeps returning undefined.

var className = $(':contains("TRI-PACK PERTEX JACKET HIBISCUS")').attr('class');

1: Here is the class I want it to return

HTML Page: https://shop.palaceskateboards.com/

I want to get the class of name of the product based on keywords later I will use nightmare JS to click that class.

`attr()` will only read from the first found element when called on a collection, and that's very unlikely to be the `h3` as you expect as it will also hit every parent element. I'd suggest trying `h3:contains(...`. If that doesn't work please add your actual HTML to the question (not just a picture of it) so we can see the exact context of the problem. — Rory McCrossan, Aug 29 '18 at 18:51
It's ugly, and a pseudoselector **and** an attribute selector (*shudders*), but you could try: `var className = $('[class]:contains("TRI-PACK PERTEX JACKET HIBISCUS")').attr('class');` which would only select the things that contain the text, and also have a class attribute — Taplar, Aug 29 '18 at 19:03
sorry @SPLYSPLY, but just to be sure of what you're asking, by "className" you really mean the css class ? or you're calling "className" to the product keywords and you want to search by them and return their object ? — Nelson Teixeira, Aug 29 '18 at 19:11

Roko C. Buljan · Answer 1 · 2018-08-29T23:58:53.210

:contains is a too general selector. If it matches, it'll literally select every single element that contains a string - in a chain.

Say you're looking for :contains('foo')

<body>     <!-- Yep contains "foo" therefore gets selected -->
   <div>   <!-- Yep contains "foo" therefore gets selected -->
      I'm a DIV
      <p>  <!-- Yep contains "foo" therefore gets selected -->
          foobar                   <!-- humm... foobar? :D -->
      </p>
   </div>
</body>

by simply doing

var $els = $(':contains("foo")')
console.log( $els )

you'll see that it's actually an Array of elements. .attr() immediately filters the first one. Clearly not the one you tried to find (body).

If you know exactly the tag you're trying to query try to be more specific with your selector like $(".product-info > a > h3:contains('foo')").
Otherwise, loop-filter all your elements, make sure that .text() returns in it's entirety the desired string.

Search products by name: solution

You already have the data-alpha="PRODUCT NAME / 1" - so use it!

var $products = $("[data-alpha]");

$("#search").on("input", function() {
  $products.hide().filter((i, el) => 
    new RegExp(this.value.trim(), 'ig').test(el.getAttribute("data-alpha"))
  ).show();
});

// on scroll don't forget to update $products

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}

#product-loop {
  display: flex;
  flex-flow: row wrap;
}
[data-alpha] {
  flex: 1 1 25%;
  border: 1px solid #ddd;
  padding: 5px;
}
[data-alpha]:before{
  content: attr(data-alpha);
}

<input type="text" id="search" placeholder="Search product...">

<div id="product-loop" class="clearfix">
  <div data-alpha="TRI-PACK PERTEX JACKET HIBISCUS" data-price="13800" data-i="1"></div>
  <div data-alpha="ZIP KNIT PEACH / RED" data-price="10800" data-i="12"></div>
  <div data-alpha="S-PLAKET OVERSHIRT RED" data-price="12800" data-i="13"></div>
  <div data-alpha="S-PLAKET OVERSHIRT NAVY" data-price="12800" data-i="14"></div>
  <div data-alpha="DANSE SHIRT BLUE" data-price="11800" data-i="15"></div>
  <div data-alpha="DANSE SHIRT BLACK" data-price="11800" data-i="16"></div>
  <div data-alpha="SERVICE SHORT SLEEVE SHIRT GREEN / WHITE" data-price="9800" data-i="17"></div>
  <div data-alpha="SERVICE SHORT SLEEVE SHIRT BLACK / WHITE" data-price="9800" data-i="18"></div>
  <div data-alpha="PLAIN PANT BLACK" data-price="12800" data-i="19"></div>
  <div data-alpha="PEAKING JEAN MULTI" data-price="15800" data-i="20"></div>
  <div data-alpha="P-CARP PANT BLACK" data-price="12800" data-i="21"></div>
  <div data-alpha="P-CARP PANT NAVY" data-price="12800" data-i="22"></div>
  <div data-alpha="DANSE PLAIN PANT BLACK" data-price="12800" data-i="23"></div>
  <div data-alpha="PALACE JEAN BLACK STONEWASH" data-price="12800" data-i="24"></div>
  <div data-alpha="PALACE JEAN STONEWASH" data-price="12800" data-i="25"></div>
  <div data-alpha="PJS PALACE JEAN WHITE DENIM" data-price="12800" data-i="26"></div>
  <div data-alpha="P-LITE RUN IT JACKET ULTRAMARINE" data-price="14800" data-i="27"></div>
  <div data-alpha="P-LITE RUN IT SHORT ULTRAMARINE" data-price="9800" data-i="28"></div>
  <div data-alpha="P-LITE RUN IT JACKET BLACK" data-price="14800" data-i="29"></div>
  <div data-alpha="P-LITE RUN IT SHORT BLACK" data-price="9800" data-i="30"></div>
</div>

<script src="//code.jquery.com/jquery-3.3.1.js"></script>

95faf8e76605e973 · Answer 2 · 2018-08-29T19:04:12.543

-1

This should do the trick

$(document).ready(function(){
    var className = $('h3').filter(":contains('TRI-PACK PETREX JACKET HIBISCUS')").attr('class');
    console.log(className);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-info">
<a href=""><h3 class="title">TRI-PACK PETREX JACKET HIBISCUS</h3></a>
</div>

edited Aug 29 '18 at 19:04

answered Aug 29 '18 at 18:57

95faf8e76605e973

13,643
3
24
51

The whole point is the user enters a keyword and it will find the product so .product-info, etc would defeat the purpose. – SPLY SPLY Aug 29 '18 at 19:00

Reza Bayat · Answer 3 · 2018-09-10T03:03:00.420

-1

use prop function and 'className' attribute of DOM

var className = $('h3:contains("TRI-PACK PERTEX JACKET HIBISCUS")').prop('className');

your selector selects all parent elements, because all of them 'contains' specified text. limit your selector to get response

console.log($(':contains("TRI-PACK PERTEX JACKET HIBISCUS")')[0])

to make sure that element is selected correctly. and even you can use :

var elm = $(':contains("TRI-PACK PERTEX JACKET HIBISCUS")')[0]; 
if(elm){ 
    console.log(elm.className) 
}

oh yes. the selector selects 'html' element. change your selector or the way you select

edited Sep 10 '18 at 03:03

answered Aug 29 '18 at 18:58

Reza Bayat

393
2
5

Returns undefined. – SPLY SPLY Aug 29 '18 at 18:59
Both say undefined. – SPLY SPLY Aug 29 '18 at 19:07
the selector selects 'html' element. change your selector or the way you select. I'll post correct response a few minutes later – Reza Bayat Aug 29 '18 at 19:09

jQuery find element :contains, then get class

3 Answers3

Search products by name: solution