jQuery найти элемент: содержит, затем получить класс - PullRequest
Новая
       74

jQuery найти элемент: содержит, затем получить класс

0 голосов
/ 29 августа 2018

Я пытаюсь получить имя класса этого элемента, но он продолжает возвращаться неопределенным. 

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

1 : Вот класс, который я хочу вернуть

HTML-страница: https://shop.palaceskateboards.com/

Я хочу получить класс названия продукта на основе ключевых слов, позже я буду использовать кошмарный JS, чтобы щелкнуть этот класс.

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

использовать функцию поддержки и атрибут 'className' DOM 

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». изменить ваш селектор или способ, которым вы выбираете

0 голосов
/ 29 августа 2018

: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>
0 голосов
/ 29 августа 2018

Это должно сработать 

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