Селектор jQuery, где text = некоторое значение
-
03-07-2019 - |
Вопрос
У меня есть объект (в данном случае объект рейтинга из js-kit), который я хочу сделать невидимым, если значение рейтинга равно "без рейтинга".У меня возникли проблемы с получением правильного селектора jQuery для этого.
Несмотря на то, что приведенный ниже код кажется, что он должен работать, это не так.
$(".js-rating-labelText:contains('unrated')").css("visibility", "hidden");
.js-rating-labelText
это класс, который устанавливается для текста.
Решение
Есть ли другой способ выбора элемента на основе содержимого текста?
Попробуйте это:
$('.js-rating-labelText').filter(function(){
return (/unrated/i).test($(this).text())
}).css('visibility', 'hidden');
Другие советы
Вы можете создавать свои собственные методы выбора
Например, если вы хотите сделать следующее:
$('.js-rating-label:hasText(unrated)');
Вы можете определить метод hasText
следующим образом
$.expr[':']['hasText'] = function(node, index, props){
return node.innerText.contains(props[3]);
}
props [3]
содержит текст в скобках после ': hasText'.
Возможно, проблема связана с частью функции : contains ('Unrated')
. Как изменение текста на любое случайное значение дает тот же результат:
$("#ratingDiv:contains('somerandomtext')").hide();
Небольшой вариант отличного ответа @ tgmdbm. Единственное отличие состоит в том, что он выбирает только те узлы, которые имеют единственный дочерний текстовый узел, точно совпадающий с аргументом 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;
};
}
Убедитесь, что ваш код работает после , функция js-kit заполнила текст, а не перед ним.
Исходя из предоставленного вами HTML-кода, я не вижу, откуда берется проверенный текст без рейтинга.
Однако, если это полнота текста в этом элементе div, просто проверьте его напрямую.
if ($('.js-rating-labelText').text() == 'unrated'){
$(this).hide();
}
Вы также можете рассмотреть возможность использования методов hide () / show ().
$(".js-rating-labelText:contains('unrated')").hide()
Лучший способ объяснить тему - привести пример и справочную ссылку:-
Пример:- Следующий синтаксис селектора 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");
});
});
Вот некоторые 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">