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

Question

我正在尝试根据 anchor (子 data-dir_r)从 anchor 属性(父 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. 当我点击 anchor Click here 时，它将匹配列表中的 child data-dir_r=100
2. 根据data-dir_r=100会找到parent upper(parent li anchor) anchor data-dir_r值
3. 输出将为 143

错误:

1. 现在返回 null

jsFiddle sample

提前致谢

Answer 1

你必须使用 closest() 或 parents() 而不是 find in :

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

然后给你 li parent 一个类(在我的例子中是 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 上升到parent 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>