Finding which element has specific text on a list

Question

I'm doing a menu with fast acess links. I have a button on a different div that when clicked checks if the text is already there, and if it is it does nothing and if it isn't it adds to the bottom position. After that, using jquery ui the user can reorder the list.

The thing is, I want to make it so that when the user clicks and the text is already on the link, I wanted to hightlight for a brief moment the place where the link is already.

The problem I'm facing is how to get in a variable the id from the anchor that has the same text the button would input. I know I can run 10 "ifs" looking if the text is there in each variable, and if it is the animation goes off. But I was looking for a simpler solution, if there is one.

  var route = "http://link";

$('.add').click(function() {

  if(($('#ref1').text() == "Text") || ($('#ref2').text() == "Text") || ($('#ref3').text() == "Text") || ($('#ref4').text() == "Text") || ($('#ref5').text() == "Text") || ($('#ref6').text() == "Text") || ($('#ref7').text() == "Text") || ($('#ref8').text() == "Text") || ($('#ref9').text() == "Text") || ($('#ref10').text() == "Text")){


} 

  else{

    $('#ref10').attr("href", route)
    $('#ref10').text("text")

  }

  });

EDIT: Adding HTML as asked:

<h4 class="card-tittle"><i class="material-icons" id="acessicon">bookmark</i>Fast acess</h4>

  <hr>

  <div class="list-group list-group-flush" id="sortable">

    <a href="{{ route('layouts.documents.matrix') }}" class="list-group-item list-group-item-action link1" id="ref1">Rules</a>
    <a href="{{ route('layouts.forms.com') }}" class="list-group-item list-group-item-action link1" id="ref2">Forms</a>
    <a href="{{ route('layouts.docs.pdfs.mins') }}" class="list-group-item list-group-item-action link1" id="ref3">Placeholder</a>
    <a href="#" class="list-group-item list-group-item-action link1" id="ref4">Placeholder</a>
    <a href="#" class="list-group-item list-group-item-action link1" id="ref5">Placeholder</a>
    <a href="#" class="list-group-item list-group-item-action link1" id="ref6">Placeholder</a>
    <a href="#" class="list-group-item list-group-item-action link1" id="ref7">Placeholder</a>
    <a href="#" class="list-group-item list-group-item-action link1" id="ref8">Placeholder</a>
    <a href="#" class="list-group-item list-group-item-action link1" id="ref9">Placeholder</a>
    <a href="#" class="list-group-item list-group-item-action link1" id="ref10">Placeholder</a>

  </div>

  <script>

    $( ".acesstop" ).click(function() {
      var themes ="procgeral";
      sessionStorage.setItem("themes", themes);
    });

    $( function() {

      $( "#sortable" ).sortable({
        update: function(event, ui) {
        $('.link1').each(function(i) { 
           $(this).attr('id', 'ref' + (i + 1)); // update id
        });
    }
        });
      $( "#sortable" ).disableSelection();

    } );

  </script>

I thought $(this) would work, but it doesn't unfortunatly.

Thanks in advance!

Have a look at the following question. Most of the time searching parts of questions is sufficient to get on the right track here. This should help you with your 10 if statement: [How to get element by innerText](https://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext) — Georg.Duees, Jun 20 '18 at 08:52
Maybe [jquery contains](http://api.jquery.com/contains-selector/) will help you here — Andre Albert, Jun 20 '18 at 08:53
@AndreAlbert `:contains` is case sensitive, just putting this out here so OP knows. — Alex, Jun 20 '18 at 08:54
you can use JQuery Starts with Selector $('[id^=]') and iterate through the list. — trinadh, Jun 20 '18 at 08:55

Alex · Accepted Answer · 2018-06-20T14:27:42.343

1

I have used jQuery .each() method to iterate through all links, compare with passed text and add them to an array.

Here is what I have done to clear out your 10 if statements:

function findElems(text) {
 let found = [];
  let index = 0;
  
  // Iterate
  $('a').each((i, elem) => {
    if(elem.textContent == text){
      found[index] = elem;
      index++;
    }
  });
  console.log(found);
}

a {
  width: 50px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://www.a.com">AAA</a>
<a href="https://www.b.com">BBB</a>
<a href="https://www.c.com">CCC</a>
<a href="https://www.d.com">BBB</a>
<a href="https://www.e.com">EEE</a>
<a href="https://www.f.com">FFF</a>
<a href="https://www.g.com">GGG</a>
<a href="https://www.h.com">HHH</a>

<br>

<button onclick="findElems('BBB');">Find Elements</button>

OP's Solution:

var text = "TextIWantToFind";
var found;

//Iterate
$('a').each((i, elem) => {
  if (elem.textContent == text) {
    found = elem;
  }
});

// Using ES6 Template Literals
$(`#${found.id}`).effect("highlight");

/*
// Original approach
$('#' + found.id).effect("highlight");
*/

edited Jun 20 '18 at 14:27

answered Jun 20 '18 at 09:19

Alex

2,164
1
9
27

This seems to work, thanks! Just a question, since I make sure there are no duplicates, I might as well just a use regular variable instead of an array, right? Thanks again. – JohnyJohnson Jun 20 '18 at 10:06
@JohnyJohnson Do you mean duplicate links or duplicate entries? – Alex Jun 20 '18 at 10:38
There won't be duplicate links or entries. That "if" posted doesn't allow for duplicates. – JohnyJohnson Jun 20 '18 at 11:18
1

I followed your logic and ended up working as I wanted, thanks! For future reference I did the following: var text; var found; // Iterate $('a').each((i, elem) => { if(elem.textContent == "TextIWantToFind"){ found = elem; } }); $('#' + found.id).effect( "highlight"); – JohnyJohnson Jun 20 '18 at 14:19
No problem @JohnyJohnson, glad to be any help! :) – Alex Jun 20 '18 at 14:28

Finding which element has specific text on a list

1 Answers1