JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

JavaScript

window.addEvent('domready', function(){
    
    var prevs = $('term-2')
        .getAllPreviousUntil('dt')
        .setStyle('background-color','red');
    
});

Element.implement({
    
    getAllPreviousUntil: function(match){
        var prevs = this.getAllPrevious();
        var parent = prevs[0].getParent();
        var until = parent.getElement(match);
        var prevIndex = prevs.indexOf(until);
        var els = prevs.filter(function(item, index){
            return index < prevIndex;
        });
        console.log(els);
        return els;
    }

});
        
// any way to use walk?