前端——通過父元素獲取同級元素的name屬性
阿新 • • 發佈:2018-11-09
今天在寫專案的時候需要將一個<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值。