add tabindex attribute to a class mark dynamically

Question

I am new to angularjs . I am using a textangular to show a html document. I want to highlight some words from that html and also want to focus that word.So, I am using tabindex and class = mark to highlight and focus. So, Here At first I am adding

<span class="mark">ABC</span>

so that It will get highlighted, after that I want to add a tabindex=1 attribute to this .So that It become like

<span class="mark" tabindex="1">ABC</span>

Here I want to add this tabindex dynamically. That means , I want to find that text and then add a tabindex to that text only.How can I achieve this ?At a time tabindex can be applied to only one word.

Answer 1

You can try with contains() like this. Change span to a to get default href highlighter.

 $("button").click(function() { $("a.mark:contains('ABC')").attr("tabindex", 1); $("a.mark1:contains('ABC')").attr("tabindex", 2); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="mark" href="#">ABC</a> <a class="mark1" href="#">ABC</a> <button>Next</button> 

Answer 2

.focus() or keyboard navigating / tabindexing <span> 's is not reliable.

You need to use empty hyperlink tags, like so:

<a href="#" onCLick="return false" class="mark">ABC</a>

 $("button").click(function() { $("a.mark:contains('ABC')").focus(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" onCLick="return false" class="mark">ABC</a> <a href="#" onCLick="return false" class="mark1">ABC1</a> <button>Next</button>