How to get au-target-id recursively?

I want to know, Is there any way to get all related au-target-id of the element recursively?

  • Element 5 => the target
  • Element 4 => parent
  • Element 3 => parent of parent
  • Element 2 => parent of parent of parent
  • Element 1 => parent of parent of parent of parent
  • … => …

Sometimes I need to build a completely unique identifier for an element and I want to use this method to build it.

so

Element 5 id => _f_d_c_b_a

thanks.

If the elements are static, meaning you know all elements will always be there, you can

<elem ref="el1">
    <elem ref="el2">
        <elem ref="el3">
        ...and so on
        </elem>
    </elem>
</elem>

Then in viewmodel…

const id = `${$(this.el3).attr('au-target-id')}_${$(this.el2).attr('au-target-id')}_${$(this.el1).attr('au-target-id')}";

If they are dynamically created, the elements change, then you can just use something like jquery and…

<div ref="container">
   // dynamically added elements that contain a class of .items for the elements you want to parse
</elem>
let id = '';
$(this.container).find('.items').each((i, item)=>{
    const thisId = $(item).attr('au-target-id');
    
    id += // build out id however you want
});

This is with jQuery but you can of course easily do the same with vanilla js with a little extra code

1 Like