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>