根据jQuery中的子数据嵌套父数据值

Question

我试图根据锚（子女data-dir_r）从锚属性（父data-dir_r）获取值。它一直返回null。

这里是我的HTML和jQuery ::

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

<ul class="ul-element"> 

<li class="li-element"> 
    <a class="anchor" href="#" data-dir_r="143"> Parent</a> 

    <ul class="ul-element"> 

     <li class="li-element"> 

      <a class="anchor" href="#" data-dir_r="100"> Child </a> 

     </li> 

    </ul> 
</li> 
</ul> 

<a href="#" class="click-here"> Click here </a> 

<script> 

$("a.click-here").click(function(event){ 

    var number = 100; 

    var child = $("ul li a.anchor").filter("[data-dir_r='" + number + "']"); 
    var prent = child.find("li a.anchor").data("dir_r"); 

    console.log(prent); 

}); 

</script> 

要求：

1. 当我点击锚Click here那么它会在列表中
2. 根据data-dir_r=100匹配子data-dir_r=100它会发现父母上位（父母李主持人）地址data-dir_r值
3. 输出将143

错误：

1. 现在它返回null

jsFiddle sample

提前

Answer 1

感谢您对使用closest()或parents()，而不是find在：

var prent = child.find("li a.anchor").data("dir_r"); 

，并给您li父（在我的例子parent）一类，所以它应该是：

var prent = child.closest("li.parent").find('a.anchor').data("dir_r"); 
//Or 
var prent = child.parents("li.parent").find('a.anchor').data("dir_r"); 

那么它将从child上去父li a.anchor然后获得所需的数据。

注：如果你不想或者不能添加类，你可以使用：

var prent = child.closest("ul:first>li").find('a.anchor').data("dir_r"); 

希望这有助于。

$("a.click-here").click(function(event){ 
 
    var number = 100; 
 
    var child = $("ul li a.anchor").filter("[data-dir_r='" + number + "']"); 
 
    var prent = child.closest("li.parent").find('a.anchor').data("dir_r"); 
 
    
 
    console.log(prent); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="ul-element"> 
 

 
    <li class="li-element parent"> 
 
    <a class="anchor" href="#" data-dir_r="143"> Parent</a> 
 

 
    <ul class="ul-element"> 
 

 
     <li class="li-element"> 
 

 
     <a class="anchor" href="#" data-dir_r="100"> Child </a> 
 

 
    </li> 
 

 
    </ul> 
 
    </li> 
 
</ul> 
 

 
<a href="#" class="click-here"> Click here </a>