Question

如何获取所有跨度文本并匹配jQuery上的文本输入？这是我的HTML代码。具有数据和跨度的表，其中包含文本MEW，MEWL和MOWL：

我的jQuery代码尝试。它始终会向false发出警报：

$(function() {
  $('#btn').on('click', function() {
    if ($('#txt').val == $('.answer').text()) {
      alert("true");
    } else {
      alert("false");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="answer">MEW</span></td>
    <td><span class="answer">MEWL</span></td>
    <td><span class="answer">MOWL</span></td>
  </tr>
</table>

<input type="text" id="txt" />
<input type="button" id="btn" value="Click" />

我想检查跨度文本是否与输入值匹配，例如：我将键入MEW，因为跨度文本中存在MEW，系统应发出true警报。

Answer 1

$(function(){
    $('#btn').on('click', function(){
        $('table').find('td').each(function(){
          var ans = $(this).find('span').text();
         
          if($('#txt').val() == ans){
            alert("true");
          }
          else{
            alert("false");
          }
        });        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="answer">MEW</span></td>
    <td><span class="answer">MEWL</span></td>
    <td><span class="answer">MOWL</span></td>
  </tr>
</table>

<input type="text" id="txt" />
<input type="button" id="btn" value="Click" />

Answer 2

以下一行将为您提供跨度.answer的一系列文本。 $('.answer').toArray().map(x => $(x).text())

.includes()将检查数组是否包含该值。它将返回true或false。

您可以进行以下检查。

$(function() {
  $('#btn').on('click', function() {        
    if ($('.answer').toArray().map(x => $(x).text()).includes($('#txt').val())) {
      alert("true");
    } else {
      alert("false");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="answer">MEW</span></td>
    <td><span class="answer">MEWL</span></td>
    <td><span class="answer">MOWL</span></td>
  </tr>
</table>

<input type="text" id="txt" />
<input type="button" id="btn" value="Click" />

Answer 3

首先$('#txt').val应该是$('#txt').val()，因为它是一种方法。进一步了解.val() here。

您需要遍历所有.answer元素，并检查该值是否匹配。

$('#btn').on('click', function(){
    var found = false;
    $('.answer').each(function(index, elem){
        if($(elem).text().toLowerCase().trim() == $('#txt').val().toLowerCase().trim()) {
        found = true;
        return false;
        }
   });
   alert(found);
});

$(function(){
    $('#btn').on('click', function(){
    var found = false;
      $('.answer').each(function(index, elem){
        if($(elem).text().toLowerCase().trim() == $('#txt').val().toLowerCase().trim()) {
              found = true;
              return false;
        }
      });
      alert(found);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><span class="answer">MEW</span></td>
        <td><span class="answer">MEWL</span></td>
        <td><span class="answer">MOWL</span></td>
    </tr> 
</table>

<input type="text" id="txt" />
<input type="button" id="btn" value="Click" />

jQuery：如何将输入值与jQuery中的所有元素匹配？

3 个答案: