如何使用jQuery检查当前值是否存在于特定元素中

Question

我创建了一个下拉菜单。 我试图使用jQuery获取当前的li值。 有什么方法可以获取当前li的当前值，或者可以通过其他任何更聪明的方法来获取。

我的JS小提琴示例： http : //jsfiddle.net/o2gxgz9r/17/

Answer 1

需要删除空格

 $('.languageDropdown li').on('click', function(){ var reg = /^\\s*|\\s*$/g; alert("=="+$(this).text()+"=="); var text = $(this).text().replace(reg, ""); if( text === 'ENGLISH'){ alert('you just clicked english'); } 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/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（）通常会在实际值周围返回一堆空格，因此最好将它们进行比较。

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

或者，更好的是，向标签本身添加一个属性，这样即使文本使用其他语言，您也可以标识该值。

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

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

Answer 3

就像其他人说的那样， .text()返回很多不必要的空格（应该是一些HTML标记），例如<li><a>123</a></li>将返回{bunch of spaces}123{bunch of spaces}因为锚标记a已被空格替换，如果我们使用$("li a").text()代替，则不会存在此类空格，因为不会发生HTML标记替换。

但是，我个人很少使用.text()作为值比较。 更好的做法是使用元素的data-* attr，如果它是一个组合属性，则可以避免丢失data-前缀，以防止混淆其他程序员。

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

好一点，@ Ying Yi，关于删除空格。

然后，只需添加trim（）即可：

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

});

Answer 5

一种简单的方法是获取<li>元素的第一个子元素，然后获取它的innerHTML。 您可以执行此操作，而无需更改大部分代码： 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');
    }
});