jq处理div的一些操作及思路

我这个是电商系统为前提举例子

1.遍历后获取指定元素数据

问题：一个页面遍历了三个商品，因为是遍历的，所以三个商品代码是一样的，但是每个商品都有独自的数量，我们在下单的时候需要区分每一个商品的编码，以及数量。那么如何在相同的代码中获取目标商品编码以及购买数量交到后台处理呢？

代码：

<c:forEach items="${items}" var="prd" varStatus="s">
	 <span class="good-price">
	 	//减商品数量
        <div class="less"  onClick="prdSubNum()"></div>
        //直接改变数量
		<div class="input">
        	<input type="text" onchange="changeNum(this)"
               class="prd_num"
               value="1"
               skuid="1"
             >
        </div>
        //增商品数量
	    <div class="plus" onClick="prdAddNum()"></div>
	 </span>
</c:forEach>

解决:利用遍历的索引，组成一个各自的class（类名+ ${s.count}），这样就可以区分开三个商品的类名了（下面代码class=prd_num ${s.count}）

<c:forEach items="${items}" var="prd" varStatus="s">
	 <span class="good-price">
	 	//减商品数量
        <div class="less"  onClick="prdSubNum(${s.count})"></div>
        //直接改变数量
		<div class="input">
        	<input type="text" onchange="changeNum(this)"
               class="prd_num${s.count}"
               number="${s.count}"
               value="1"
               skuid="1"
             >
        </div>
        //增商品数量
	    <div class="plus" onClick="prdAddNum(${s.count})"></div>
	 </span>
</c:forEach>

js:

/*减产品*/
function prdSubNum(obj) {
    var prdNum = $(".prd_num" + obj);
    var value = prdNum.val();
    var num = parseInt(value) - 1;
     if (num == 0) {
        return;
    }
    prdNum.val(num);
}

/*改变数量*/
function changeNum(obj) {
   var number = $(obj).attr("number");
   var num =  $(".prd_num" + number).attr("num");
   var value = $(obj).val(num);
}

/*加产品*/
function prdAddNum(obj) {
    var prdNum = $(".prd_num" + number);
    var value = prdNum.val();
    var num = parseInt(value) + 1;
    prdNum.val(num);
}

2.jq的获取对应标签（div。。。）后的一些用法：

//例子
 <div class=".prd_num" value="1" skuid="2">替换1</div>

//根据类名获取div：
var div =  $(".prd_num");
//根据ID获取div：
var div =  $("#prd_num");

//获取div里面的value
var value = $("#prd_num").val(); //1
var value = div.val();
var skuid = div.attr("skuid"); //2

//需要运算的时候
var num = parseInt(value); //int
var num = Number(value); 

//需要修改内容“替换1”的时候
div.html("替换2");
//效果：
 <div class=".prd_num" value="1" skuid="2">替换2</div>
 
//往里面添加1个标签
 $(".prd_num").attr(add: "add");
 //效果：
 <div class=".prd_num" value="1" skuid="2" add:"add" >替换1</div>
 
//往里面添加多个标签
 $(".prd_num").attr({add: "add",remove: "remove"});
 //效果：
 <div class=".prd_num" value="1" skuid="2" add:"add" remove: "remove" >替换1</div>
 
//往里面添加onclick事件
 var btn = document.getElementsByClassName("prd_num");
 btn[0].setAttribute("onclick", "addCart(" + number + ")");
 //效果：
 <div class=".prd_num" value="1" skuid="2" onclick=addCart(${s.count}) >替换1</div>

//往里面添加类名
  $(".prd_num").addClass("add");
 //效果：
 <div class=".prd_num add" value="1" skuid="2" >替换1</div>