jQuery Selektor, in dem Text = some Wert

Question

Ich habe ein Objekt (in diesem Fall ein Rating-Objekt aus js-Kit), dass ich unsichtbar machen will, wenn der Bewertungswert ‚nicht eingestuft‘ ist. Ich habe Probleme mit dem richtigen jQuery-Selektor bekommen, dies zu tun.

Auch wenn Sie den Code unten scheint, wie es funktionieren sollte, tut es nicht.

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

.js-rating-labelText ist eine Klasse, die auf den Text ist.

Answer 1

  

Gibt es eine andere Art und Weise ein Element zu wählen, basierend auf dem Textinhalt?

Versuchen Sie folgendes:

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

Answer 2

Sie können Ihre eigenen Wähler Methoden

erstellen

Zum Beispiel, wenn Sie wollen in der Lage sein, die folgenden Aufgaben:

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

Sie können die hasText Methode wie folgt definieren

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

props[3] enthält den Text in den Klammern nach dem ': hasText'.

Answer 3

Vielleicht sind die Probleme mit dem :contains('Unrated') Teil der Funktion. Wie ändern Sie den Text zu jedem beliebigen Wert erzeugt das gleiche Ergebnis:

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

Answer 4

Eine leichte Variante @ tgmdbm die ausgezeichnete Antwort. Der einzige Unterschied besteht darin, dass sie wählt nur Knoten, die einen einzelnen Kind Textknoten haben genau das hasText() Argument entspricht. Während .innerText gibt die Verkettung aller untergeordneten Textknoten.

  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;
     };
  }

Answer 5

Stellen Sie sicher, dass Code ausgeführt wird nach die js-Kit Funktion hat den Text bevölkert, und nicht davor.

Answer 6

Auf der Grundlage der HTML Sie zur Verfügung gestellt, ich sehe nicht, wo die ‚nicht eingestuft‘ Text, den Sie für die Prüfung sind herkommt.

Wenn jedoch, dass die Gesamtheit ist des Textes in diesem div, gerade testen Sie es direkt.

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

Answer 7

Sie können auch mit den hide () / show () Methoden in Betracht ziehen.

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

Answer 8

Der beste Weg, um das Thema zu erklären, ist durch ein Beispiel und einen Verweis Link geben: -

Beispiel: - Die folgende Syntax jQuery Selektor wählt das erste oder die n-te Element aus dem Satz von bereits ausgewählten (matched) HTML-Elementen.

$("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");
    });
});

Answer 9

Hier ist ein Teil des HTML-Code aus der JavaScript-Funktion kommen:

<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">