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

妖狐艹你老母 2022-04-18 02:08 347阅读 0赞

今天在写项目的时候需要将一个<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>标签中。

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

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

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

即

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

这样我们就拿到了shoe\_img的name值。