如何使用 jQuery 选择器选择列表中的所有项目答案

【问题标题】：How to select all items in a list using jQuery Selector如何使用 jQuery 选择器选择列表中的所有项目
【发布时间】：2020-03-14 19:35:01
【问题描述】：

我正在这些行上创建一个动态列表：

<li class="MainMenuList" data-role=list-divider>
    <li data-icon=check id="1">
        <a name="n1" id="id-1">Text-1</a>
    </li>
    <li data-icon=check id="2">
        <a name="n2" id="id-2">Text-1</a>
    </li>
    <li data-icon=check id="3">
        <a name="n3" id="id-3">Text-1</a>
    </li>
</li>

如何运行 JQuery .each() 选择器来访问列表中的所有值。尝试这个不会产生蚂蚁结果。

$( ".MainMenuList li a" ).each(function( index ) {
    var n1 = $(this).attr('name');
    var n2 = parseInt ($(this).attr('id'));
    alert( index + "-" + n1 + "-" + n2);
});

【问题讨论】：

您的 HTML 无效。
为了扩展这个相当简洁的注释，您的 li 标签应该包含在 ul（无序列表）或 ol（有序列表）标签中
你的 parseInt 会抛出错误。

标签： javascript jquery jquery-selectors

【解决方案1】：

你的 HTML 无效，外面的 li 应该是 ul 才有效。

<ul class="MainMenuList" data-role=list-divider>
    <li data-icon=check id="1">
        <a name="n1" id="id-1">Text-1</a>
    </li>
    <li data-icon=check id="2">
        <a name="n2" id="id-2">Text-1</a>
    </li>
    <li data-icon=check id="3">
        <a name="n3" id="id-3">Text-1</a>
    </li>
</ul>

这一行

var n2 = parseInt ($(this).attr('id'));

与

相同

var n2 = parseInt("id-2");

并且 parseInt 不会返回 2，它会返回 NaN。

你必须使用正则表达式

$(this).attr('id').match(/\d+/)[0]

或拆分拉出号码

$(this).attr('id').split("-")[1]

或者，如果这是一个有效的假设，您可以只引用父母 ID。

$(this).parent().attr('id')

【讨论】：

【解决方案2】：

这是您的代码的jsFiddle

如 cmets 中所述，您的第一个 <li> 元素应该是 <ul>
您还应该将 <a> id 更改为严格的数字（因为您将其解析为整数）或仅检索数字部分（通过 substr 或其他方式）

【讨论】：

谢谢。是的，这有效。我认为我犯的主要错误是未使用
也感谢所有其他人的意见。是的，它是一个粗略的 HTML（从主代码中提取）。但是我发现我没有使用 ul 因此无法正确使用选择器的错误。再次感谢。

【解决方案3】：

你在一个字符串上调用parseInt()。如果您知道您的 ID 将始终采用 id-N 的形式，您可以这样做

var id = $(this).attr("id");
var n2 = parseInt(id.split("-")[1]);

【讨论】：