时间戳

首页 > 解决方案 > 查找列表中哪个元素具有特定文本

javascript - 查找列表中哪个元素具有特定文本

问题描述

我正在做一个带有快速访问链接的菜单。我在另一个 div 上有一个按钮，单击该按钮时会检查文本是否已经存在，如果是，它什么也不做，如果不是，它会添加到底部位置。之后，使用 jquery ui 用户可以重新排序列表。

问题是，我想这样当用户点击并且文本已经在链接上时，我想短暂地突出显示链接已经存在的地方。

我面临的问题是如何从具有与按钮输入的相同文本的锚中获取变量 id。我知道我可以运行 10 个“ifs”来查看每个变量中是否存在文本，以及动画是否关闭。但我一直在寻找一种更简单的解决方案，如果有的话。

  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")

  }

  });

编辑：按要求添加 HTML：

<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>

我认为 $(this) 会起作用，但不幸的是它并没有。

提前致谢！

标签： javascripthtml

解决方案

我已经使用jQuery .each()方法遍历所有链接，与传递的文本进行比较并将它们添加到数组中。

以下是我为清除您的 10if条陈述所做的工作：

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的解决方案：

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

推荐阅读