前端——通过父元素获取同级元素的name属性

今天在写项目的时候需要将一个<img>的name值传送给controller，相应的htmll代码如下：

[code]<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代码：

[code]$("#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，这里我们得到的将是一个数组，它包含了父元素所有的子元素。

又

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

从上面的代码我们知道，我们的目标对象在<a>标签中。

这时候，我们可以通过lis[0].children的方式得到shoe_img。

这时候我们就已经取到了目标元素。

这时再获取name属性的值就可以了。

即

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

这样我们就拿到了shoe_img的name值。