Question

I really need your help with coding this for me. How can I check an <a>'s text element against a string value to see if the tab already exists or not?

I apologize in advance as I am new to this and I am not sure how to accomplish this. An answer using jQuery is fine as well.

var x = "tabTwo"

Some new function here to check and see if the string value tabTwo matches any of the existing tab text values, return true or false.

Here is the HTML markup/structure:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul class="tabs">
    <li><a href='#tab1'>tabOne</a></li>
    <li><a href='#tab2'>tabTwo</a></li>
    <li><a href='#tab3'>tabThree</a></li>
    <li><a href='#tab4'>tabFour</a></li>
</ul>

</body>

</html>

Answer 1

您可以使用jQuery为a元素定位，方法是为其提供类或ID，并将其作为目标。

$('#tab1');

然后您可以使用.text()（或许多其他选项）获取值

$('#tab1').text();

然后你可以比较它。

if ($('#tab1').text() === x) {
    // Do stuff
}

您可以通过为共享类分配所有标记并循环遍历它们并使用$(this)进行定位来进一步抽象。

$('.tab_link').each(function(){
    if ($(this).text() === x) {
        // Do stuff
    }
});

Answer 2

在a标记中添加一个类，然后您可以尝试：

var link = $('.link').text();
if(link == "some Value")
   ...

Answer 3

您可以为您提供一个独特的类属性＆＃39; a＆＃39;标签。并选择＆＃39; a＆＃39;像这样使用jquery

$('.classname').each(function(){
  if($(this).text() == 'tabTwo' { //here you have it

  }
})

Answer 4

var match = "tabTwo"
var tabArray = document.querySelectorAll('li>a');

tabArray.forEach((elem)=>{
if(match === elem.innerText){
  return true;
}
return false
});

Answer 5

首先，您必须使用$("a")获取所有.each(function() {...}个元素，然后通过text()进行迭代。在循环内部，您必须检查当前元素的tabExists是否等于所需的字符串：如果是 - 那么我们将false变量从true更改为checkTabExistence("tabTwo")。在我的例子中，我编写了单独的函数，因此您可以使用您喜欢的任何参数调用它。我已拨打true，应该记录checkTabExistence("tabSix")和false，这应记录$(document).ready(function() { checkTabExistence("tabTwo"); checkTabExistence("tabSix"); }); function checkTabExistence(stringToCheck) { var tabExists = false; $("a").each(function() { if($(this).text() === stringToCheck) { tabExists = true; } }); console.log(stringToCheck + " exists: " + tabExists); }：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
    <li><a href='#tab1'>tabOne</a></li>
    <li><a href='#tab2'>tabTwo</a></li>
    <li><a href='#tab3'>tabThree</a></li>
    <li><a href='#tab4'>tabFour</a></li>
</ul>

＆＃13;

{{1}}

＆＃13;

Answer 6

我不确定是否了解您的问题，但我会为您提供2个解决方案。

1）如果你想使用id

进行检查

function isTabExistsById(id) {
  return $('.tabs a[href="#'+id+'"]').length > 0;
}

console.log(isTabExistsById('tab1')); // true
console.log(isTabExistsById('tab3')); // true
console.log(isTabExistsById('tabFour')); // false
console.log(isTabExistsById('tab5')); // false

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <ul class="tabs">
        <li><a href='#tab1'>tabOne</a></li>
        <li><a href='#tab2'>tabTwo</a></li>
        <li><a href='#tab3'>tabThree</a></li>
        <li><a href='#tab4'>tabFour</a></li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </body>
</html>

2）如果您想使用内容检查

function isTabExistsByCaption(text) {
  var result = false;
  
  $('.tabs a').each(function() {
    if ($(this).text().trim() == text) {
      result = true;
      return;
    }
  });
  
  return result;
}

console.log(isTabExistsByCaption('tabOne')); // true
console.log(isTabExistsByCaption('tabFour')); // true
console.log(isTabExistsByCaption('tabFive')); // false
console.log(isTabExistsByCaption('tab3')); // false

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <ul class="tabs">
        <li><a href='#tab1'>tabOne</a></li>
        <li><a href='#tab2'>tabTwo</a></li>
        <li><a href='#tab3'>tabThree</a></li>
        <li><a href='#tab4'>tabFour</a></li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </body>
</html>

希望，我理解你的问题。如果不是，你能用更多细节解释一下吗？

检查<a> elements text value against a string

6 个答案: