Select all descendant HTML elements with a certain class that don't have an element with an other specific class in between

Question

Assume you have the following HTML:

<div id="root-component" class="script-component">a0
            <div></div>
            <div class="component">a2</div>
            <div class="script-component">b
                <div class="component">b1
                    <div class="script-component">c
                    </div>
                    <div class="component">b2
                    </div>
                </div>
            </div>
            <div class="component">a3</div>
            <div class="component">a4</div>
            <div>            
                <div class="component">a5</div>
            </div>
            <div class="component"> a6            
                <div class="component">a7</div>
            </div>
            <div class="component">a8
                <div class="script-component"></div>
            </div>
</div>

From the root-component I would like to select all child elements with a component class until and not including the elements with the script-component class. This means at the end only the elements with an a text (a2, a3, a4, a5, a6, a7 and a8 should be selected) should be selected.

Edit: Or in Trung's words: The goal is to skip searching for components down the tree once script-component class is encountered.

Edit2: Or in even other words: I would like to select all .component children until a .script-component is encountered.

It can be done using jQuery and CSS.

You can use this jsFiddle http://jsfiddle.net/pgegsjja/ to try it out.

Answer 1

This selects all the a components. Test it out and see if it suits your requirements.

$('#root-component').find(".component").siblings(':not(.script-component)').css("color", "red");

Answer 2

Filter function tests against less than 2 matches because we need to include class script-component occurring in the root-component div.

 jQuery.expr[':'].parents = function (a, i, m) { return jQuery(a).parents(m[3]).length < 2; }; // The b2 element is still selected so it is not yet correct $('#root-component').find(':not(.script-component) .component, >.component').css("color", "red"); $('.component').filter(':parents(.script-component)').css("color", "blue"); 

 div { margin-left: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="root-component" class="script-component">a0 <div></div> <div class="component">a2</div> <div class="script-component">b <div class="component">b1 <div class="script-component">c</div> <div class="component">b2</div> </div> </div> <div class="component">a3</div> <div class="component">a4</div> <div> <div class="component">a5</div> </div> <div class="component">a6 <div class="component">a7</div> </div> <div class="component">a8 <div class="script-component"></div> </div> </div>