javascript - 如何比较 ul li 文本和数组值

Question

我正在使用 jQuery Vector Map，用户选择的区域名称必须添加到 UL li 标记中。我这样做是为了，每当用户单击矢量 map 区域时，相应的区域值就会在 li 标记中更新。

现在我必须满足条件，

如果用户选择的区域值已存在于 li 列表项中。我必须显示警报(“用户选择的区域已在列表中”)；

如果用户选择的区域值不在 li 项目中，我必须将区域值添加到 li 项目中。

这里是示例代码 - (用户选择的区域状态值，我在“区域”中获取)

   var regionList = new Array('Alaska','Alabama','Arkansas','Arizona', etc....) /* sample array*/


   if( li item text value  == arrayvalue) /*exact condition statement I want*/
   {
       alert("user selected region already in the list")

   }
    else
   {
          $('<li>' + region + '</li>').appendTo('ul#location-selected');
   } 


   <ul id="location-selected" style="font-weight:bold;width:350px;padding-top:15px;color:red;"></ul>

请帮我完成这个..

Answer 1

var ul = document.getElementById('location-selected');
var lis = ul.getElementsByTagName('li');

for(var i = 0; i < lis.length; i++){
    if(lis[i].innerHTML === region) {
        isInList = true;
        break;
    }
}

if(isInList)
    alert("user selected region already in the list")
else {
    var newli = document.createElement('li');
    newli.innerHTML = region;
    ul.appendChild(newli);
}

jQuery:

var ul = $('#location-selected');
var lis = ul.children('li');

var isInList = false;
for(var i = 0; i < lis.length; i++){
    if(lis[i].innerHTML === region) {
        isInList = true;
        break;
    }
}

if(isInList)
    alert("user selected region already in the list")
else
    var newli = $('<li></li>').html(region).appendTo(ul);