jedes Element zwischen zwei ids

Question

[Update: Da das Problem tut scheint nicht auflösbar zu sein CSS nur, ein JavaScript Funktion die beiden markierten Elemente als Eingabe verwendet würde genügen]

Ich habe eine rekursive Liste mit zwei Elementen, die mit IDs markiert sind (T1, T2). Die zwei Elemente sind nicht unbedingt Geschwister voneinander.

Meine Frage betrifft eine CSS-Selektor jedes li Listenelement zwischen diese beiden IDs auszuwählen:

• einschließlich:
  • das Element mit den IDs selbst
  • alle li Kind oder Elternknoten, die zwischen diesen beiden (rekursiv) sind, nicht nur Geschwister
• (ohne
  • alle Elemente vor der ersten ID oder nach dem zweiten ID
  • alle nicht li Elemente)

die IDs T1 und T2 auch sein könnte, in andere Reihenfolge, mit T2 zuerst und T1 irgendwo später im Baum.

---

Das folgende Beispiel zeigt die beiden ID-Elemente zusammen mit den Elementen, die ausgewählt werden sollen:

#T1 { color: red;} 
 
#T2 { color: blue;}

<ul> 
 
    <li>not selected</li> 
 
    <li>not selected</li> 
 
    <ul> 
 
    <li>not selected</li> 
 
    <li id="T1">selected (specific id)</li> 
 
    <li>selected</li> 
 
    <ul> 
 
     <li>selected</li> 
 
    </ul> 
 
    </ul> 
 
    <ul> 
 
    <li>selected</li> 
 
    <li>selected</li> 
 
    <ul> 
 
     <li>selected</li> 
 
     <li>selected</li> 
 
     <li id="T2">selected (specific id)</li> 
 
    </ul> 
 
    <li>not selected</li> 
 
    </ul> 
 
    <li>not selected</li> 
 
    <li>not selected</li> 
 
    <ul> 
 
    <li>not selected</li> 
 
    </ul> 
 
    <li>not selected</li> 
 
</ul>

Answer 1

Hier ist eine Funktion, die eine Anordnung von Elementen erfolgt, durchläuft sie und wendet eine spezifische Klasse auf alle Elemente zwischen den beiden IDs an (und schließt auch die Elemente mit den IDs ein).

var liElements = document.querySelectorAll("li"); 

var selectElementsBetweenIds = function (elements, id1, id2) { 

    var firstIdFound = false; 
    var applySelector = false; 


    for (var i = 0; i < elements.length; i++) { 
    var elementId = elements[i].getAttribute("id"); 

    if (elementId === id1 || elementId === id2) { 
     applySelector = firstIdFound ? false : true; 
     firstIdFound = applySelector ? true: false; 
     elements[i].classList.add("selected"); 
     continue; 
    } 
    if (applySelector) { 
     console.log("getting here"); 
     elements[i].classList.add("selected"); 
    } 
    } 
} 

selectElementsBetweenIds(liElements, "T2", "T1"); 

JSFiddle Example