جستجو در ارایه و حذف با استفاده از jQuery

در این قسمت ما مخواهیم نحوه جستجو در یک آرایه و حذف مورد پیدا شده صحبت کنیم. همه ما با jQuery کار کرده ایم. همچنین گاهی اوقات با آرایه ها در jQuery کار کرده ایم.حال فرض کنید که ما آرایه ایم داریم و میخواهیم عنصری از آن را حذف نماییم و یک آرایه ای جدید ایجاد کنیم بدون آن عضو مورد نظر، برای انجام این کار چه عملیاتی باید ص.رت بپذیرد؟

در اینجا ما از تابعی به نام grep استفاده میکنیم.عملکرد این تابع مانند تابع مشابه each در jQuery است.

شروع:

ابتدا کتابخانه jQuery را اضافه میکنیم:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

و آرایه مورد نظر را بصورت زیر تعریف میکنیم:

var myArray = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']

در مرحله بعد ما این آرایه را بصورت یک جدول Html نمایش میدهیم. برای این کار از تایع زیر استفاده میکنیم:

function buildTable(array,message){
	      var html='<table><caption>'+message+'</caption><tr>';
		  for(var i=0;i<array.length;i++)
		  {
			html+='<td>'+array[i]+'</td>';
		  }
		  html+='</tr></table>';
		  $("#body").html(html);
	   }

این تابع دارای دو پارامتر است. array ارایه مورد نظر ماست و message یک پیغام است که در صفحه نمایش داده میشود.

ایت تابع را بصورت زیر میتوان فراخوانی نمود:

var myArray = ['Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday','Sunday']			
			var message="My Array Elements Before Removing";
			buildTable(myArray,message);

استایل جدول نمایش داده شده را نیز به شکل زیر تعریف میکنیم:

<style>
		  tr{
		     border:1px solid #ccc;
		  }
		  td{
			 border:1px solid #ccc;
			 padding: 10px;
		  }
		  #body{
		    margin: 30px;
		  }
		  #click{
		    margin: 30px;
			cursor:pointer;
		  }
		  
      </style>

در انتها نمایش ارایه ما بصورت زیر میباشد:

 حالا نیاز داریم که عملیات جستجو و حذف را انجام دهیم.از یک تگ a برای این کار به شکل زیر استفاده میکنیم

<a hrefe="#" id="click">Click To Remove</a>

$("#click").click(function(){
				var message="My Array Elements After Removing";
				var excludedElement = ['Thursday'];
				myArray = jQuery.grep(myArray, function(value) {
				return value != excludedElement;
			    });
			    buildTable(myArray,message);
			});

ما عبارت  ‘Thursday’ را در یک متغیر قرار دادیم

var excludedElement = ['Thursday'];

و سپس بوسیله دستور jQuery.grep کار اصلی صورت میپذیرد یک آرایه جدید ساختخ میشود بدون عنصر مورد نظر.

return value != excludedElement;

و در انتها مجددا تابع buildTable را برای نمایش دوباره آرایه فراخوانی میگردد.