前端——通过父元素获取同级元素的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值。