按名称搜索产品：解决方案

Question

我正在尝试获取此项的类名，但它一直返回未定义。

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

1：Here is the class I want it to return

HTML页面：https://shop.palaceskateboards.com/

稍后我想根据关键字获取产品名称的类别，我将使用噩梦JS单击该类别。

Answer 1

:contains是一个过于笼统的选择器。如果匹配，它将从字面上选择每个包含字符串的元素-链中。

说您正在寻找: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>

只需做

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

您会看到它实际上是一个元素数组 s 。 .attr()立即过滤第一个。显然不是您尝试找到的（body）。

如果您确切知道要查询的标签，请尝试使用诸如$(".product-info > a > h3:contains('foo')")之类的选择器来更具体。
否则，对所有元素进行循环过滤，确保.text()完整返回期望的字符串。

按名称搜索产品：解决方案

您已经有了data-alpha="PRODUCT NAME / 1"-因此请使用它！

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>

Answer 2

这应该可以解决问题

$(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>

Answer 3

使用prop函数和DOM的'className'属性

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

您的选择器选择所有父元素，因为它们全部“包含”指定的文本。限制您的选择器以获取响应

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

以确保正确选择了该元素。甚至可以使用：

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

哦，是的。选择器选择“ html”元素。更改选择器或选择方式

jQuery查找元素：包含，然后获取类

3 个答案:

按名称搜索产品：解决方案