如何通过 <li> 元素的 id 在 <li> 中获取 的类属性答案

【问题标题】：How to get the class attribute of a inside a <li> by id of the <li> element如何通过 <li> 元素的 id 在 <li> 中获取 的类属性
【发布时间】：2021-06-24 11:55:52
【问题描述】：

在我的 _Layout.cshtml 中， 内有一个 <li>，例如：

<li id="li-id">
    <span class="my-btn-click">Button</span>
</li>

只有 <li> 元素的 id 是已知的，我想获取  元素的类属性（其 id 和类未知）。

我试过了

var classAttr = $("#li-id").closest("span").attr("class")

但这给出了“未定义”。任何帮助将不胜感激。

【问题讨论】：

.closest() 只能向上工作。你必须使用$('#li-id').find('span').attr('class')（如果你使用jquery，你的问题只会说明javascript很难。）
@cloned .find 以某种方式被收藏而不是 jQuery 中的简单子选择器？
当您尝试 closest 并没有成功时。你搜索过最接近的吗？它清楚地表明“对于集合中的每个元素，通过测试元素本身并遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。”。关键：遍历其祖先。其次，您不需要额外的 jquery/javascript 方法来查找它。您可以只更改选择器（在这种特定情况下）。第三，您发布的是 jquery 而不是普通的 javascript。请相应地更改您的标签
取决于您想要做什么以及您当前可用的内容。您可以将包装器存储在变量中并通过 find() 定位多个元素。比如` var divs = $el.find('div'); var spans = $el.find('span')` 等

标签： jquery razor

【解决方案1】：

使用最接近（）是错误的。

console.log($("#li-id").find("span").attr("class"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="li-id">
    <span class="my-btn-click">Button</span>
</li>

【讨论】：

我在页面上还有其他几个跨度，当我使用 find('span') 时，我得到一个与我所针对的跨度无关的类列表。为了进行测试，我在 span 中添加了一个 Id 并使用了 find('#mySpan') 然后正确返回了类属性。有什么建议如何获取 li 内具有已知 id 的 span 的类属性？
上面的代码只会在#li-id中找到spans。如果您在该#li-id 中有多个跨度，则必须更具体地使用选择器。例如，您可以使用find("> span") 找到直接子跨度。
使用 $("#li-id").find("span").eq(1).attr("class");确实获得了我正在寻找的跨度的类属性。

【解决方案2】：

var classAttr = $("#li-id > span").attr("class");

【讨论】：

【解决方案3】：

在 JavaScript 中，您可以使用查询选择器获取该类：

var classAttr = document.querySelector('li#li-id span').attributes.class.value

【讨论】：