Здесь есть пара вопросов.
- Префикс
# не должен помещаться в атрибут id в вашем HTML. Убери это. - В первой группе элементов в
#Parent отсутствует класс .sportlist.
Кроме того, следует отметить, что map() или $.map() используется для создания массива из объекта jQuery. Если вам нужно всего лишь oop, просто используйте 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>
Обновление
Если я задаю href как # вместо #Parent мы можем получить список, как мы получаем в настоящее время?
Конечно. Для этого вам нужно использовать обход 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...
})
});