jquery - 通过动态id查找类并访问数据值

Question

我有树形结构数据，我想在单击特定父级时获取每个父级的 id。这类似于我的问题here

我无法获得所需的警报有人可以告诉我出了什么问题

$(".chapter").on("click", function() {
  let id = $(this).attr("href");
  list = $.map($(id).find(".sportlist"), function(item) {
    alert($(item).data("value"))
  })
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="tree-ehex col-md-3" style="padding-left:0px;float: left; width:215px;overflow-x:scroll;height:261px;" id="treeOrderDiv">
  <ul style="padding-left: 0px;" id="leftsubMenus-Ul">
    <li class="parent_li">
      <span style="font-family: serif;font-size: small;" title="Collapse this branch"><i class="tree-ehex-title glyphicon glyphicon-minus-sign"></i></span>
      <a href="#Parent" class='chapter'> Parent</a>
      <ul id='#Parent'>
        <li style="display: list-item;" data-value='20'>
          <a href="#"><span style="text-transform: uppercase;color:black;font-size: smaller;font-family: sans-serif"> Child1 </span></a>
        </li>
        <li style="display: list-item;" data-value='22'>
          <a href="#"><span style="text-transform: uppercase;color:black;font-size: smaller;font-family: sans-serif"> Child2 </span></a>
        </li>
      </ul>
    </li>
    <li class="parent_li">
      <span style="font-family: serif;font-size: small;" title="Collapse this branch"><i class="tree-ehex-title glyphicon glyphicon-minus-sign"></i></span>
      <a href="#Parent1" class='chapter'> Parent1</a>
      <ul id="#Parent1">
        <li class='sportlist' style="display: list-item;" data-value='22'>
          <a href="#"><span style="text-transform: uppercase;color:black;font-size: smaller;font-family: sans-serif"> Child</span></a>
        </li>
        <li class='sportlist' style="display: list-item;" data-value='24'>
          <a href="#"><span style="text-transform: uppercase;color:black;font-size: smaller;font-family: sans-serif"> Child1 </span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

这里有几个问题。

• # 前缀不应放置在 HTML 的 id 属性中。去掉它。
• #Parent 下的第一组元素缺少 .sportlist 类。

此外，您应该注意 map() 或 $.map() 用于从 jQuery 对象创建数组。如果您想要的只是一个循环，只需使用each()。

除非别无选择，否则不要使用内联 style 属性。最佳实践是在外部样式表中使用 CSS 样式规则。

最后，不要使用 alert() 进行调试，因为它会强制数据类型。 console.log() 或 console.dir() 始终是此处的最佳操作方案。

话虽如此，试试这个:

$(".chapter").on("click", function() {
  let selector = $(this).attr("href");

  $(selector).find(".sportlist").each(function() {
    let value = $(this).data('value');
    console.log(value);

    // do something useful with value...
  })
});

#treeOrderDiv {
  padding-left: 0px;
  float: left;
  width: 215px;
  overflow-x: scroll;
  height: 261px;
}

#leftsubMenus-Ul {
  padding-left: 0px;
}

.parent_li span {
  font-family: serif;
  font-size: small;
}

.sportlist {
  display: list-item;
}

.sportlist span {
  text-transform: uppercase;
  color: black;
  font-size: smaller;
  font-family: sans-serif;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="tree-ehex col-md-3" id="treeOrderDiv">
  <ul id="leftsubMenus-Ul">
    <li class="parent_li">
      <span title="Collapse this branch"><i class="tree-ehex-title glyphicon glyphicon-minus-sign"></i></span>
      <a href="#Parent" class="chapter">Parent</a>
      <ul id="Parent">
        <li class="sportlist" data-value="20">
          <a href="#"><span>Child1</span></a>
        </li>
        <li class="sportlist" data-value="22">
          <a href="#"><span>Child2</span></a>
        </li>
      </ul>
    </li>
    <li class="parent_li">
      <span title="Collapse this branch"><i class="tree-ehex-title glyphicon glyphicon-minus-sign"></i></span>
      <a href="#Parent1" class="chapter">Parent1</a>
      <ul id="Parent1">
        <li class="sportlist" data-value="22">
          <a href="#"><span>Child</span></a>
        </li>
        <li class="sportlist" data-value="24">
          <a href="#"><span>Child1</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

更新

If I give href as # instead of #Parent can we get the list as we are getting currently?

当然。为此，您需要使用 DOM 遍历，而不是直接定位元素。试试这个:

$(".chapter").on("click", function() {
  let $ul = $(this).next('ul');
  $ul.find(".sportlist").each(function() {
    let value = $(this).data('value');
    console.log(value);

    // do something useful with value...
  })
});