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>

要求：

当我点击锚Click here时，它会匹配列表中的子data-dir_r=100
根据data-dir_r=100，它会找到父上（父li锚）锚data-dir_r值
输出将为143

错误：

现在返回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>

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

1 个答案: