Wie überprüfe ich, ob der aktuelle Wert in einem bestimmten Element mit jQuery existiert

Question

Ich habe ein Dropdown-Menü erstellt. Ich habe versucht, den aktuellen li Wert mit jQuery zu erhalten. Gibt es eine Möglichkeit, dass wir den aktuellen Wert der aktuellen li oder eine andere kluge Art, das zu tun, erhalten können.

Mein JS Fiddle Beispiel: http://jsfiddle.net/o2gxgz9r/17/

Answer 1

brauchen Räume entfernen

$('.languageDropdown li').on('click', function(){ 
 

 
var reg = /^\s*|\s*$/g; 
 
alert("=="+$(this).text()+"=="); 
 
var text = $(this).text().replace(reg, ""); 
 

 

 
\t if(text === 'ENGLISH'){ 
 
\t \t alert('you just clicked english'); 
 
\t } 
 
\t else{ 
 
\t \t alert('wrong value'); 
 
\t } 
 
\t 
 
});

a{ 
 
    font-size:12px; 
 
    color:#000; 
 
    text-decoration:none; 
 
} 
 
li a{ 
 
    padding-left:20px; 
 
} 
 
li a:hover{ 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="language"> 
 
     <a href="#"> 
 
      ENG 
 
     </a> 
 
     <i class="fa fa-caret-down" aria-hidden="true"></i> 
 
     </span> 
 
     <ul class="languageDropdown"> 
 
     <li> 
 
      <a href="#"> 
 
      ENGLISH 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      SPANISH 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      ARABIC 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      TELUGU 
 
      </a> 
 
     </li> 
 
     </ul>

Answer 2

.text() gibt in der Regel eine Reihe von Whitespaces um den tatsächlichen Wert, so ist es besser, vergleiche sie so.

if ($(this).text().trim() === 'ENGLISH') 

Oder, noch besser, ein Attribut zu dem Tag selbst hinzufügen, damit Sie können den Wert auch erkennen, wenn der Text in anderen Sprachen ist.

<li value="english"> 
    <a href="#"> 
     'ENGLISH' in some other language 
    </a> 
</li> 

if ($(this).attr("value") === "english") 

Answer 3

Wie die anderen gesagt, .text() kehrt viele unnötige Leerräume (die einige HTML-Tags sein sollte), zum Beispiel <li><a>123</a></li>{bunch of spaces}123{bunch of spaces} zurückkehren wird, weil der Anker-Tag a durch Leerzeichen ersetzt worden, wäre es nicht so sein, Art von Leerzeichen, wenn wir stattdessen $("li a").text() verwenden, da kein HTML-Tag-Ersatz auftritt.

Allerdings nutze ich persönlich .text() als Wertvergleich selten. Die bessere Praxis wäre die Verwendung der data-* Attr der Elemente, vermeiden Sie die data- Präfix, wenn es ein Make-up-Attr ist, um andere Programmierer zu verwirren.

JsFiddle: http://jsfiddle.net/Zay_DEV/o2gxgz9r/19/

var AcceptedValues = ["english", "abc"], 
 
    ListItems = $(".languageDropdown li").each(function(){ 
 
     var $this = $(this); 
 
     $this.attr("data-value", $this.text().trim().toLowerCase()); // Bind their text to data-value 
 
    }).on("click", function() { 
 
     var $this = $(this), 
 
      Value = $this.attr("data-value"); 
 

 
     if ($.inArray(Value, AcceptedValues) >= 0) // Search if the value inside the array 
 
     alert("You just clicked '" + Value.toUpperCase() + "'"); 
 
     else alert("Wrong value"); 
 
    });

a{ 
 
    font-size:12px; 
 
    color:#000; 
 
    text-decoration:none; 
 
} 
 
li a{ 
 
    padding-left:20px; 
 
} 
 
li a:hover{ 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<span class="language"> 
 
     <a href="#"> 
 
      ENG 
 
     </a> 
 
     <i class="fa fa-caret-down" aria-hidden="true"></i> 
 
     </span> 
 
     <ul class="languageDropdown"> 
 
     <li> 
 
      <a href="#"> 
 
      ABC 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      ENGLISH 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      SPANISH 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      ARABIC 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      TELUGU 
 
      </a> 
 
     </li> 
 
     </ul>

Answer 4

Ein einfacher Weg ist es, das erste Kind des <li> Element zu erhalten, dann die Innerhtml davon bekommen. Sie können dies tun, ohne viel von Ihrem Code zu ändern: http://jsfiddle.net/ykbmatxw/

$('.languageDropdown li').on('click', function(){ 
    if($(this).children().get(0).innerHTML.trim() === 'ENGLISH'){ 
     alert('you just clicked english'); 
    } 
    else{ 
     alert('wrong value'); 
    } 
}); 

Answer 5

Guten Punkt @Ying Yi, über das Entfernen von Leerzeichen.

Dann sollte dies nur funktionieren die Trimmung Zugabe() als auch:

$('.languageDropdown li').on('click', function(){ 
if($(this).text().trim() === 'ENGLISH'){ 
    alert('you just clicked english'); 
} 
else{ 
    alert('wrong value'); 
} 

});