Idan Shechter Idan Shechter - 4 months ago 11
Javascript Question

Traversing up and finding a child element with attribute equal to a specific value

I have a list

UL
that contains an element article that has an attribute
data-level
. I am traversing in Javascript through the articles. I am adding a replyto symbol to comments that have a
data-level
larger than 1, but to get the username of the parent, I need to traverse the comment list up and find an article element that has
data-level="0"
and get the username from that element.

I can't use jquery
closest()
because it doesn't check inside the element. If I use
parent().parent()
it will run closest() on the parent, which is also not good.

How can I run a
closest()
function or something familiar on the article element (red arrow in the image) to find the first article element above it that has its attribute equals to 0 (
data-level="0"
).

Here's an the HTML code:

<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>


Note: There can be several comments with
data-level="0"
and I need the closest one above the article I am currently checking. In other words. For an
<article>
element, I need to find the closest (from above)
<article>
element that exists above it inside an
li
element that it's attribute
data-level
equals to zero.

Answer

You can use closest to get the li around the reply, and then prevAll with a :has([data-level=0]) filter, and then first to get the nearest (prevAll returns them in order of nearness rather than the usual document order):

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

Simplified example:

// 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>

Note how our starting point was the li two siblings away from the one containing data-level="0", but we skipped the one in-between because it didn't match the :has condition.