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.
3 answers
solution1
0 2018-08-29 19:19:32
: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 element s . .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>
solution2
-1 2018-08-29 18:57:55
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>
solution3
-1 2018-08-29 18:58:35
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.