JQuery 數組獲取和刪除元素


<script>

var target = [];
target [0] = "aaa000";
target [1] = "bbb111";
target [2] = "ccc222";
target [3] = "ddd333";
target [4] = "eee444";
target [5] = "fff555";

console.log("使用push()添加元素之前長度:"+target.length);

target.push("ggg666");//target [6] = "ggg666";

console.log("使用push()添加元素之后長度:"+target.length);

console.log(target[6]);//根據下標獲取元素值
var local = $.inArray("ccc222", target); //根據元素值查找下標,不存在返回-1
target.splice(local,1);//根據下標刪除一個元素   1表示刪除一個元素

console.log("使用splice()刪除1個元素之后長度:" + target.length);
</script>

效果圖

可以用作動態添加標簽,以及刪除標簽

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>

.baseDiv {
height : 1%;
width : 100%;
background-color : aqua;
}
.newDiv {
height : 1%;
width : 100%;
background-color : yellow;
margin-top : 1%;
cursor : pointer;
}
</style>


<body>

<input id="target" type="text" style="width:100%;">
<button id="addDiv">添加div元素到baseDiv</button>


<div id="baseDiv" class="baseDiv">
<p>這里一個名為baseDiv的div</p>
<p>這是一個段落。</p>

</div>
<br>
<button id="removebaseDiv"  >移除baseDiv</button>
<script>
var num = 1;
var target = [];
$(function(){
    $('#addDiv').bind('click', function(event) {
        $("<div id='div"+ num +"' onclick='removeDiv(this)' class='newDiv'>這是新增的div"+ num +",點擊可以刪除</div>").appendTo("#baseDiv");
		target.push("這是新增的div"+num+",點擊可以刪除");
		$('#target').val(target);
		num++;
		
    });
})
$(function(){
    $('#removebaseDiv').bind('click', function(event) {
		
        $('#baseDiv').remove();
    });
})
function removeDiv(node) {
	var content = $('#'+node.id+'').text();
	var local = $.inArray(content, target);
	target.splice(local,1);
	$('#target').val(target);
	
	$('#'+node.id+'').remove();
}
</script>
</body>
</html>

效果圖

連續多次點擊添加div元素到baseDiv按鈕

點擊這是新增的div3,點擊可以刪除


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM