如何使用jQuery检查当前值是否存在于特定元素中
如何使用jQuery检查当前值是否存在于特定元素中
提问于 2016-09-28 09:27:08
我创建了一个下拉菜单。我正在尝试使用jQuery获取当前的li值。有没有什么方法可以得到当前li的当前值，或者其他更智能的方法。
我的JS提琴示例：http://jsfiddle.net/o2gxgz9r/17/
回答 5
Stack Overflow用户
发布于 2016-09-28 09:38:11
需要删除空格
$('.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>
Stack Overflow用户
发布于 2016-09-28 09:43:33
.text()通常在实际值周围返回一堆空格，所以最好像这样比较它们。
if ($(this).text().trim() === 'ENGLISH')或者，更好的做法是向标记本身添加一个属性，这样即使文本使用其他语言，您也可以识别该值。
<li value="english">
<a href="#">
'ENGLISH' in some other language
</a>
</li>
if ($(this).attr("value") === "english")Stack Overflow用户
发布于 2016-09-28 09:57:08
就像另一个人说的那样，.text()返回了很多不必要的空格(应该是一些超文本标记语言标签)，例如<li><a>123</a></li>会返回{bunch of spaces}123{bunch of spaces}，因为锚标记a已经被空格替换了，如果我们使用$("li a").text()来代替，就不会有这样的空格，因为没有发生超文本标记语言标记替换。
但是，我个人很少使用.text()作为值比较。更好的做法是使用元素的data-*属性，如果它是一个编造属性，则避免遗漏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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39736628
复制相关文章
相似问题
腾讯云开发者
