jQuery：如何将输入值与 jQuery 中的所有 <td> 元素匹配？答案

【问题标题】：JQuery: How to match the input value to all <td> elements in jQuery?jQuery：如何将输入值与 jQuery 中的所有 <td> 元素匹配？
【发布时间】：2026-02-05 15:45:02
【问题描述】：

如何获取所有跨度文本并匹配 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 系统应该警报 true，因为跨度的文本中存在 MEW。

【问题讨论】：

可能是因为您的txt 属性不是class，而是id。
嗨，把你的跨度答案放在
很抱歉，这只是一个错字。但即使我改变了它也不起作用。
$(function(){ $('#btn').on('click', function(){ $('table').find('td').each(function( ){ var ans = $(this).find('span').text(); if($('#txt').val == ans){ alert("true"); } else{ alert("假"); } }); }); });
val 是一个函数，所以使用val()

标签： jquery

【解决方案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" />

【讨论】：

【解决方案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" />

【讨论】：

【解决方案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" />

【讨论】：