Pages

系列文章

2014/12/04

【JQuery應用】$.each() 查詢陣列是否包含某個值

我們在使用陣列有時會希望能夠查詢陣列中是否包含某個值
如果有包含某個值就執行某些事件/動作
例如說:某人將某個班級有有A、B、C、D四個學生存在陣列中
而我希望查找C學生是否存在於這個班級名單內的時候就可以使用此方法
這個例子可能舉的沒有很好,大家將就一下看懂了就可以應用在其它地方了
接下來馬上就讓我們來介紹一下這麼方便的方法吧

首先為了方便測試效果我們要先建立一個HTML的input button按鈕跟text欄位
讓使用者輸入要查詢的值
  <input id="srcKey" value="">
  <input id="src" type="button" value="查詢">
  <p id="view"></p>
接下來讓我們來看看JQuery的寫法
我們用JQuery中的each來遍歷陣列中所有的值
並判斷是否有值跟使用者輸入的一樣
$(function(){
  //按下查詢時觸發事件
  $("#src").click(function(){
    //新增一個陣列變數並賦予陣列值
    var strArray = new Array("AC","B","C","D","E");  
    //遍歷strArray中的陣列值並執行function
    $.each(strArray,function(ind , value){
      //判斷陣列值是否等於User輸入的值
      if(value==$("#srcKey").val()){
        //將查到的值與陣列中的索引位置顯示在ID為view的P Tag上
        $("#view").text("查到 : " + $("#srcKey").val() + "在第" + ind + "個索引的位置");
        //如果查到了就結束each陣列
        return false;
      }else{
        //顯示查無參數的資訊
        $("#view").text("查無" + $("#srcKey").val() + "這個參數");
      }
    });  
  });  
});

這邊要注意的是這種查詢方式是屬於精準查詢喔
項上例中的第一個選項值為AC如果你打A會出現查不到值的訊息
打C的話會查到索引值為2地方,這邊請各位要多注意
不要拿這個範例去當模糊查詢使用唷

Dome

See the Pen JQuery $.each() Search Array value by jen (@jen_huang) on CodePen.



沒有留言:

張貼留言