jQuery find element :contains, then get class

user_10217315 0
Viewed 528

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.

nightmare electron jquery javascript
3 Answers

: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>

user_3839040

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>

user_86808050

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

user_51338150
Related