Finding a class by dynamic id and accessing the data value

Question

I have tree structured data where I want to get the id's of each parent on clicking on particular parent. This is similar to my question here

I am unable to get the required alert can some one let me know what is wrong

$(".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>

`$("#Parent1")` won't find `
` `#` means `id=` so you would want `
` or `$("#\#Parent1")` — freedomn-m, Apr 21 '20 at 13:27
Related: https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — freedomn-m, Apr 21 '20 at 13:28

score 1 · Answer 1 · answered Apr 21 '20 at 13:28

You have number of options:

change id attrs of ul from <ul id="#Parent"> to <ul id="Parent"> and leave js as-is
or leave html as-is, but change js:

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

Rory McCrossan · Accepted Answer · 2020-04-21T15:25:43.687

There's a couple of issues here.

The # prefix should not be placed in the id attribute in your HTML. Remove it.
The first group of elements under #Parent is missing the .sportlist class.

In addition you should note that map() or $.map() is used to create an array from the jQuery object. If all you want is a loop just use each().

Also don't use inline style attributes unless there is no other choice. The best practice is to use CSS styling rules in an external stylesheet.

Finally, don't use alert() for debugging as it coerces data types. console.log() or console.dir() is always the best course of action here.

With all that said, try this:

$(".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>

Update

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

Sure. To do that you need to use DOM traversal instead of directly targeting the elements. Try this:

$(".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...
  })
});

I'm not sure what you mean. If the href if `#` you can't use it to target any elements — Rory McCrossan, Apr 21 '20 at 15:11
I mean I will give href as # instead if Parent can we get the list as we are getting currently — Developer, Apr 21 '20 at 15:15
Ah, I understand what you mean now. I updated the answer to show you how you can do that — Rory McCrossan, Apr 21 '20 at 15:26

score 0 · Answer 3 · answered Apr 21 '20 at 13:30

0

Make sure not to include the # in your id attributes. So, change id='#Parent' to id='Parent'

answered Apr 21 '20 at 13:30

Scruffy Paws

1,137
1
17
25

score 0 · Answer 4 · answered Apr 21 '20 at 13:58

0

You can solve the issue without changing the HTML by using the following script:-

$(".chapter").on("click", function() {  
  $.each($(this).next().find('li'), function(){
    alert($(this).data('value'))
  });
});

answered Apr 21 '20 at 13:58

Sourav

578
5
9

Finding a class by dynamic id and accessing the data value

4 Answers4