1. 程式人生 > >前端——通過父元素獲取同級元素的name屬性

前端——通過父元素獲取同級元素的name屬性

今天在寫專案的時候需要將一個<img>的name值傳送給controller,相應的htmll程式碼如下:

<div class="seller_good">
	<a href="#"><img class="shoe_img" id="shoe_img" src="${good_1_pic}" name="8"></img></a>
	<div id="revise" >修改</div>
							
	<form:formid="revise_form"modelAttribute="accountmodel"action="http://localhost:8080/Takout/views/html_jsp/revise_good" method="get">
	<input id="revise_good_id" type="text" name="good_id"></input>
	</form:form>
	<div id="delete">刪除</div>
	<div class="shoe_intro">${good_1_intro }</div>
	<div class="shoe_price">${good_1_price }</div>
</div>

我需要通過點選revise提交shoe_img的name傳到相應的controller中,如何獲取shoe_img的name讓我想了一會,後來想到了辦法。

這裡直接貼js程式碼:

$("#revise").click(function(){
	
	alert("修改商品");
	 var obox=this.parentNode;//獲取當前元素的父div,即seller_good
     var lis=obox.children;//lis是當前seller_good的子元素們
    //lis[0].children 是img元素
   	var good_id=$(lis[0].children).attr('name');
 
	$("#revise_good_id").val(good_id);
	//提交表單
  	$("#revise_form").submit();
})	

首先,我們通過this.parentNode獲取到revise的父元素,即seller_good並將其賦給obox。

接著我們再通過obox.children獲得父元素seller_good的子元素,並將其賦值給lis,這裡我們得到的將是一個數組,它包含了父元素所有的子元素。

<a href="#"><img class="shoe_img" id="shoe_img" src="${good_1_pic}" name="8"></img></a>

從上面的程式碼我們知道,我們的目標物件在<a>標籤中。

這時候,我們可以通過lis[0].children的方式得到shoe_img。

這時候我們就已經取到了目標元素。

這時再獲取name屬性的值就可以了。

var good_id=$(lis[0].children).attr('name');

這樣我們就拿到了shoe_img的name值。