jQuery查找包含特定文本的元素，并获取其类名。

Question

jQuery查找包含特定文本的元素，并获取其类名。

3

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

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

1: 这是我想要返回的类

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

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

- SPLY SPLY

1

当在集合上调用attr()时，它只会从第一个找到的元素中读取，这很不可能是您期望的h3，因为它还会命中每个父元素。我建议尝试h3:contains(...。如果这行不通，请将实际的HTML添加到问题中（而不仅仅是图片），以便我们可以看到问题的确切上下文。 - Rory McCrossan

虽然有点难看，而且用到了伪选择器和属性选择器（打颤），但你可以尝试以下代码：var className = $('[class]:contains("TRI-PACK PERTEX JACKET HIBISCUS")').attr('class'); 这段代码只会选择那些同时包含文本和class属性的元素。 - Taplar

@Taplar在控制台返回未定义。 - SPLY SPLY

@RoryMcCrossan 添加了一个页面，这样你就可以查看HTML了。 - SPLY SPLY

1

我在那个页面上得到了“jQuery未定义”的错误。 - Taplar

抱歉 @SPLYSPLY，但为了确保你的问题，你所说的 "className" 真的是指 CSS 类吗？还是你将 "className" 称为产品关键字，并希望通过它们进行搜索并返回对象？ - Nelson Teixeira

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · 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 )

你会发现它实际上是一个元素数组。 .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>

- Reza Bayat · Answer 2

使用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”元素。更改您的选择器或选择方式。

- 95faf8e76605e973 · Answer 3

这应该能解决问题

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