如果最接近的元素包含字符串，则向该元素添加类

Question

I have some fixed HTML and I need to set a class to the element newgroup based on the element with the class relatedheader . As you can see in the HTML, the first element has a string - Accessories . I want to give the three elements below that element with the class newgroup to have class based on that string. Then I want the next set to have class from the next relatedheader element.

How do I do this with jQuery or vanilla JS? I guess the first step is to make the relatedheader element a parent?

What I got so far:

$('.relatedheader').nextUntil('.relatedheader').addClass('selected');

How do I make the script take the class dynamically releatedheader element?

<div class="relatedheader">
    <span class="unfoldedlabel" colspan="6">
        <a>Accessories/</a>
    </span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="relatedheader">
    <span class="unfoldedlabel" colspan="6">
        <a>computers/</a>
    </span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>

Answer 1

Here you go:

$(document).ready(function(){   

    $(".unfoldedlabel a").each(function(){

        if($(this).text() != "")
        {
            $(this).closest(".relatedheader").nextUntil(".relatedheader").addClass($(this).text().replace("/",""));
        }
    });
});

LINK To JSFIDDLE

Answer 2

Here is the working fiddle .

$('.relatedheader').find('a').each(function() {
   $(this).parents('.relatedheader').nextUntil('div.relatedheader').addClass('selected');
});

Here in the above example I'm looping through each a inside .relatedheader class and then adding selected class to all element until next .relatedheader .

NOTE: If you want to only add those class to next set of element as per .relatedheader a selection or some event then you can bind this functionality to that event only.

Hope this is what you need!