根據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>