获取使用父元素

Question

在我的项目的event.target价值，我有4个格，并获得第4格值的价值，我必须做的：

event.target.parentElement.parentElement.parentElement.parentElement.value 

所以，当我改变任何UI改变，那么值引用丢失，应用程序崩溃。

那么有没有其他解决方案来摆脱这种方法，并获得价值，而不考虑UI的变化。

为图像中，如果我需要输入文本框的值，我需要从承认在上课深入到使用event.target输入元素。

例如：

event.target.parentElement.parentElement.parentElement.parentElement 
      .parentElement.parentElement.querySelector("#Username").value 

Answer 1

我建议你使用事件代表团采取冒泡的优势。在这种情况下，您可以使用e.delegateTarget来获取父级。

$(function() { 
 
    $('#parent').on('click', '.children', function (e) { 
 
    console.log(e.delegateTarget); 
 
    }); 
 
});

#parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: black; 
 
} 
 

 
#child-1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
#child-2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
} 
 

 
#child-3 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="child-1" class="children"> 
 
    <div id="child-2" class="children"> 
 
     <div id="child-3" class="children"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>