gpt4 book ai didi

javascript - 向上遍历并找到属性等于特定值的子元素

转载 作者:行者123 更新时间:2023-11-29 19:11:37 26 4
gpt4 key购买 nike

我有一个列表 UL包含具有属性 data-level 的元素文章.我正在通过文章遍历 Javascript。我正在为具有 data-level 的评论添加回复符号大于 1,但要获取父级的用户名,我需要向上遍历评论列表并找到具有 data-level="0" 的文章元素并从该元素中获取用户名。

我不能使用 jquery closest()因为它不检查元素内部。如果我使用 parent().parent()它会在父级上运行 closest(),这也不好。

如何运行 closest()函数或 article 元素上熟悉的东西(图像中的红色箭头)找到它上面的第一个属性等于 0 的 article 元素(data-level="0")。

这是一段 HTML 代码:

<ul>
<li>
<article itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment" data-user-id="28" id="comment-40" data-comment-id="40" class="comment-wrapper" data-level="0">
<header>
<p class="comment-title"> <span class="submitted-by"><span itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"><span itemprop="name">yariv</span></span><span class="karma" title="Karma"><span class="fa fa-star"></span>0</span> •
<meta itemprop="dateCreated" content="2015-12-09T06:28:59Z">
<time class="date-submitted" datetime="2015-12-09T06:28:59Z">7 months ago</time>
</span>
</p>
</header>
<div class="comment-content">
<p class="comment-body" itemprop="text">fgdfg </p>
</div>
<div class="comment-options"><span data-already-voted="false" class="upvote"><span class="fa fa-thumbs-up"></span><span class="upvote-num" itemprop="upvoteCount">1</span></span><span class="reply" data-user-id="28" data-comment-id="40">Reply</span><span class="flag-comment">Flag</span>
</div>
<div class="notification"></div>
</article>
</li>
<li>
<article itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment" data-user-id="28" id="comment-42" data-comment-id="40" class="comment-wrapper" data-level="2">
<header>
<p class="comment-title"> <span class="submitted-by"><span itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"><span itemprop="name">yariv</span></span><span class="karma" title="Karma"><span class="fa fa-star"></span>0</span> •
<meta itemprop="dateCreated" content="2015-12-09T06:28:59Z">
<time class="date-submitted" datetime="2015-12-09T06:28:59Z">7 months ago</time>
</span>
</p>
</header>
<div class="comment-content">
<p class="comment-body" itemprop="text">fgdfg </p>
</div>
<div class="comment-options"><span data-already-voted="false" class="upvote"><span class="fa fa-thumbs-up"></span><span class="upvote-num" itemprop="upvoteCount">1</span></span><span class="reply" data-user-id="28" data-comment-id="40">Reply</span><span class="flag-comment">Flag</span>
</div>
<div class="notification"></div>
</article>
</li>
</ul>

注意:data-level="0" 可以有多个注释我需要我目前正在检查的文章上方最接近的一篇。换句话说。对于 <article>元素,我需要找到最近的(从上面)<article>li 中存在于其上方的元素它是属性的元素 data-level等于零。

最佳答案

您可以使用 closest 获取回复周围的 li,然后使用 :has([data- level=0]) 过滤器,然后 first 获取最近的(prevAll 按接近程度而不是通常的文档顺序返回它们):

var main = startingElement
.closest("li")
.prevAll(":has([data-level=0])")
.first()
.find("[data-level]");

简化示例:

// Get our starting point:
var startingElement = $("#start");

// Find the "nearest" data-level=0
var main = startingElement
.closest("li")
.prevAll(":has([data-level=0])")
.first()
.find("[data-level]");

// Show what we got
console.log(main.text());
<ul>
<li>
<div data-level="0">first level 0</div>
</li>
<li>
<div data-level="1">first level 1</div>
</li>
<li>
<div data-level="2">first level 2</div>
</li>
<li>
<div data-level="0">second level 0</div>
</li>
<li>
<div data-level="1">second level 1</div>
</li>
<li>
<div data-level="2" id="start">second level 2</div>
</li>
<li>
<div data-level="0">third level 0</div>
</li>
<li>
<div data-level="1">third level 1</div>
</li>
<li>
<div data-level="2">third level 2</div>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意我们的起点是 li 两个 sibling 远离包含 data-level="0" 的 sibling ,但我们跳过了中间的那个,因为它不符合 :has 条件。

关于javascript - 向上遍历并找到属性等于特定值的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38457173/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com