Question

我有一个列表UL，其中包含一个具有属性data-level的元素文章。我正在通过文章遍历Javascript。我正在为data-level大于1的注释添加一个replyto符号，但是要获取父级的用户名，我需要遍历注释列表并找到一个包含data-level="0"和从该元素中获取用户名。

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

如何在文章元素（图像中的红色箭头）上运行closest()函数或熟悉的东西，以查找其上面的第一个文章元素，其属性等于0（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>元素内找到它上面最接近的（{1}}元素，它的属性li等于零。< / p>

Answer 1

您可以使用IMatchResult获取回复周围的closest，然后li使用prevAll过滤器，然后使用: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的兄弟姐妹，但我们跳过了中间的兄弟姐妹，因为它与data-level="0"条件不匹配。

Answer 2

如上所述，要为每个评论添加回复小部件，我会做这样的事情。请记住，每个相关评论都引用原始w / [data-comment-id]

$(function() {
    $("[data-level][data-level!='0']").each(function() { 
        var id = $(this).data('commentId'),
          $comment = $('#comment-'+ id +''),
          author = $comment.find('[itemprop="name"]').text();

        $('<span> Reply to: </span>')
          .appendTo($(this))
          .append($('<a href="#">'+author+'</a>'));  
    });     
})

遍历并查找属性等于特定值的子元素

2 个答案: