Селектор jQuery, где text = некоторое значение

У меня есть объект (в данном случае объект оценки из js-kit), который я хочу сделать невидимым, если значение рейтинга не ограничено. У меня возникли проблемы с получением правильного селектора jQuery для этого.

Несмотря на то, что код ниже кажется, что он должен работать, это не так.

$(".js-rating-labelText:contains('unrated')").css("visibility", "hidden");

.js-rating-labelText - это класс, заданный в тексте.

Ответ 1

Есть ли другой способ выбора элемента на основе содержимого текста?

Попробуйте следующее:

$('.js-rating-labelText').filter(function(){
  return (/unrated/i).test($(this).text())
}).css('visibility', 'hidden');

Ответ 2

Вы можете создать свои собственные методы выбора

Например, если вы хотите сделать следующее:

$('.js-rating-label:hasText(unrated)');

Вы можете определить метод hasText следующим образом

$.expr[':']['hasText'] = function(node, index, props){
  return node.innerText.contains(props[3]);
}

props[3] содержит текст внутри скобок после ': hasText'.

Ответ 3

Возможно, проблема связана с частью функции :contains('Unrated'). Поскольку изменение текста на любое случайное значение дает тот же результат:

$("#ratingDiv:contains('somerandomtext')").hide();

Ответ 4

Убедитесь, что ваш код запущен после того, как функция js-kit заполнила текст, а не раньше.

Ответ 5

Вы также можете использовать методы hide()/show().

$(".js-rating-labelText:contains('unrated')").hide()

Ответ 6

Основываясь на предоставленном HTML, я не вижу, откуда идет "неизменный" текст, который вы тестируете.

Однако, если это полнота текста в этом div, просто проверьте его непосредственно.

if ($('.js-rating-labelText').text() == 'unrated'){
  $(this).hide();
}

Ответ 7

Лучший способ объяснить эту тему - дать пример и ссылку: -

Пример: - Следующий синтаксис селектора jQuery выбирает первый или n-й элемент из набора уже выбранных (согласованных) элементов HTML.

$("selector:contains(searchText)")

Html: -

<table>
<tr><td>John Smith</td><td>Marketing</td></tr>
<tr><td>Jane Smith</td><td>Sales</td></tr>
<tr><td>Mike Jordon</td><td>Technology</td></tr>
<tr><td>Mary Jones</td><td>Customer Support</td></tr>
</table>
Search: <input id="txtSearch" type="text">
<input id="btnTestIt" type="button" value="Test It">
<input id="btnReset" type="reset" value="Reset">

Jquery: -

$(document).ready( function(){
    $("#btnTestIt").click( function(){
        var searchText = $("#txtSearch").val();
        $("td:contains('" + searchText + "')").css("background-color", "yellow");
    });
    $("#btnReset").click( function(){
        $("td").css("background-color", "white");
    });
});

Ответ 8

Небольшой вариант на @tgmdbm отличный ответ. Единственное отличие состоит в том, что он выбирает только узлы, у которых есть один дочерний текст node, точно соответствующий аргументу hasText(). В то время как .innerText возвращает конкатенацию всех исходных текстовых узлов.

  if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }

Ответ 9

Вот некоторые из html, исходящие из функции javascript:

<div class="js-kit-rating" id="ratingDiv" style="width: 86px; visibility: hidden;" jk$initialized="true" path="/business/blogger-com" permalink="/businessblogger-com" freeze="yes" starcolor="Golden">
  <table class="js-ratings-tableWrapper" border="0" cellSpacing="0" cellPadding="0">
    <tbody>
      <tr>
        <td>
          <div class="js-ratingWrapper" style="width: 80px;">
          <div style="float: left; cssfloat: left;">
              <div style="width: 80px; height: 15px;">
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/golden.png">
  <img style="display: none;" src="//js-kit.com/images/stars/golden.png" complete="complete"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/golden.png"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/golden.png"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/gray.png">
  <img style="display: none;" src="//js-kit.com/images/stars/gray.png" complete="complete"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/gray.png"/>
<div class=" js-rating-labelText">