set a (same) class to a next element using the class to find the first element

[DNWEIJ]

Hello,

I have a input field and a list. the input field contains script. When the input field is changed, the list will shift the selected class to the next element. Snippet code example:

<div id="activePart"><input 
    script="on keyup
             if the event's key is 'ArrowDown' then
                  ...
                add .selected to the next <li/> from .selected within #autoCompleteCustomer
             end">
</div>
<div>
<ul>
<li class='selected'></li><li></li><li></li>
</ul>
</div>

This isn't working. Due to the from .selected my understanding from thr docs:

(next|previous) <css expression> [from <expression>] [within <expression>] [with wrapping]

is that after the from an expression is allowed to defined a starting point other that me wich is the input field and not usable. Also my understanding of expression can be anything as from the doc:

Others are a bit more exotic and, for example, make it easy to work with the DOM:

ID References: #foo
Class References: .tabs
Query References: <div/>
Attribute References: @count

I tried to use something else like adding ID (hacking on a li the id via console) as reference and then the line works: add .selected to the next <li/> from #selected within #autoCompleteCustomer However, I cannot seem to find the way to add an ID=selected via hyperscript.

So I am stuck. Could you help me to clarify what the document now means concerning expression and if it is possible to add an id via hyperscript?

thanks in advance

[cemrehancavdar]

Hi, @DNWEIJ I've managed to set same class to next sibling via using nextElementSibling of .selected this may help you.

You can check it on: https://stackblitz.com/edit/web-platform-vjkjzd?file=index.html

it seems "next from you", "next from selected" etc not working