Match breadcrumb with list item and grab it's name attribute and place into it's own href

Question

I have a set of breadcrumbs, each with text that matches a list item of the same name

Here is the example

So far I succeeded in: 1) getting the text of the clicked link, 2) matching it to a corresponding list item 3) Initially getting that list item's name attribute What I am having trouble with is passing that name attribute BACK to the clicked breadcrumb link and appending it to it's href (for targeting purposes)

Why am I doing this? -because each list item will scroll and there are going to be several results,

The use case is to have the user click a row -have the breadcrumbs appear, (this is not shown in this simplified example)-so if the user scrolls away, they can click a breadcrumb and the contents will scroll back into to that row.

HTML

<div class="wayfinder"><a href="#">red</a>><a href="#">blue</a>><a href="#">green</a>

</div>
<ul> <a name="1"><li>red</li> </a>
 <a name="2"><li>blue</li> </a>
 <a name="3"><li>green</li> </a>

</ul>

Script:

//listen on wayfinder specific link

// -I- get text from link clicked:
$('.wayfinder a').click(function () {
    var wayget= $(this).text();
 $(this).addClass('marker');
    alert(wayget);
    var _href = $(this).attr("href"); 
  //pass the attribute to back to the wayfinder  -This part isn't working-
$(this).attr("href", _href + 'listatrr');

    // search list items for matching text mark it red to identify it

$('a li').each(function() {
  if ($(this).text() == wayget) {
      $(this).css('color', 'red');
       $('li').not(this).css('color', 'black');
      //get it's attribute:

       var listatrr= $(this).parent().attr("name");
      alert(listatrr);
      //this produces an error
      //$('.wayfinder a.marker').attr("href", + listatrr);
  } 


});


});

Here is the example

Answer 1

This below is where I corrected it:

var listatrr = $(this).parent().attr("name");

//alert(listatrr);
$('.marker').attr("href", _href + listatrr);

This will reset the event:

$('.wayfinder a').mouseup(function () {
    $('.marker').attr("href", '#');
});

update

Example