Question

我正在做一个带有快速访问链接的菜单。我在另一个div上有一个按钮，单击该按钮可以检查文本是否已经存在，是否不执行任何操作，是否不执行则添加到底部位置。之后，使用jquery ui用户可以对列表重新排序。

问题是，我想这样做，以便当用户单击并且链接上已经有文本时，我想在短时间内突出显示链接已存在的位置。

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

  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）可以用，但并不是很不幸。

谢谢！

Answer 1

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

这是我为清除您的10条if语句所做的工作：

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

查找列表中具有特定文本的元素

1 个答案: