CODEWITHSUNDEEP
javascripthtml
JohnyJohnson
JohnyJohnson

Reputation: 157

Finding which element has specific text on a list

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!

Upvotes: 0

Views: 72

Answers (1)

Alex
Alex

Reputation: 2232

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");
*/

Upvotes: 1

Related Questions