jquery (Traversing) find prev element with specific class

2 years ago

#20347

afterparty

I am trying to find first previous element with specific class name (in my case element which ends with word "group") and return its value(text).

If you look at my demo code you ll see that it works only for the first matched "article". The second one can not acces the "irst previous element with "group" ending class".

Do you have any idea what other jquery traversing command i can use to achieve this?

$(document).ready(function() {   
 
 $("p.article").each(function() {
        
        var grouptittle = $(this).prev("[class$='group']").text()
        var groupid = $(this).prev("[class$='group']").prev().text()
        var articleid = $(this).text();
        var articlename = $(this).next(".articlename").text();
        var article = $(this).nextUntil("p.article", "p.normal")
 
   $(article).each(function(index, element) {
       var articlecontent = $(this).text()
       
            $("#json").append('{"articleid" : "' + articleid + '", "articlename" : "' + articlename + '", "articlecontent" : "' + articlecontent + '", "groupid" : "' + groupid + '", "gropupname" : "' + grouptittle + '"},<br><br>');
        });

 }); //article
   
 }); //ready

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
  font-size:13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="json"></div>

<p class="wyq060---group"><a name="str_1"></a>#1 GROUP</p>
<p class="wyq060---group">PRIMARY ARTICLES</p>
<p class="article">Article 1 ID</p>
<p class="articlename">Article 1 name</p>
<p class="normal">(1) content Article 1.1.</p>
<p class="normal">(2) content Article 1.2.</p>
<p class="normal">(3) content Article 1.3.</p>

<p class="article">Article 2 ID</p>
<p class="articlename">Article 2 name</p>
<p class="normal">a) content Article 2.1.</p>
<p class="normal">b) content Article 2.2.</p>
<p class="normal">c) content Article 2.3.</p>

<p class="wyq060---group">2# GROUP</p>
<p class="wyq060---group">SECONDARY ARTICLES</p>
<p class="article">Article 3 ID</p>
<p class="articlename">Article 3 name</p>
<p class="normal">(1) content Article 3.1.</p>
<p class="normal">(2) content Article 3.2.</p>
<p class="normal">(3) content Article 3.3.</p>

<p class="article">Article 4 ID</p>
<p class="articlename">Article 4 group</p>
<p class="normal">(1) content Article 4.1.</p>
<p class="normal">(2) content Article 4.2</p>
<p class="normal">(3) content Article 4.3</p>

Same demo code here: https://jsfiddle.net/ribosed/nf1q4m5h/14/

jquery

traversal

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs