如何过滤从 jQuery 返回的数据？答案

【问题标题】：How can I filter data returned from jQuery?如何过滤从 jQuery 返回的数据？
【发布时间】：2014-07-27 06:31:55
【问题描述】：

jQuery 代码：

$(document).ready(function() {
  $('#s-results').load('get_report1.php').show();
  $('#search-btn').click(function(){ showValues(); });
  $(function() {
    $('form').bind('submit', function() { showValues(); return false; });
  });

  function showValues() { 
    $.post('get_report1.php', { name: form.name.value }, 
      function(result) {
        $('#s-results').html(result).show();
      }
    ); 
  }
});

HTML：

<form name = "form">
   <div>Enter name</div>
     <input type="text" name="name" id="fn" />
     <input type="submit" value="Search" id="search-btn" />
   <div>
      <input type="text" id="se2" name="search22">
   </div>
</form>
<div id = "s-results" style="height:50px;">
</div>

到目前为止，脚本运行良好。现在我只想再次过滤上述函数返回的 HTML。

为了实现这一点，我尝试了这行代码：

$(result).filter('#se2');

在带有result参数的函数下，但是不起作用。

那么如何过滤返回的HTML代码呢？

【问题讨论】：

标签： javascript jquery html scope jquery-traversing

【解决方案1】：

您可能需要find() 而不是filter，因为您需要获取后代，而过滤器“将匹配元素集减少为匹配选择器或通过函数测试的元素” /p>

Live Demo

$(result).find('#se2');

如果#se被添加到DOM中，那么你可以直接使用id选择器

se = $('#se2');

我制作了另一个演示（因为我仍在等待您的演示不工作）以进一步详细说明如何将包含您拥有的 html 的字符串传递给 jQuery 函数 $() 以使用 find 搜索其中的元素.

Live Demo

html = '<form name = "form"> \
   <div>Enter name</div> \
     <input type="text" name="name" id="fn" /> \
     <input type="submit" value="Search" id="search-btn" /> \
   <div> \
       <input type="text" id="se2" name="search22" value="se2"/> \
   </div> \
</form>\
<div id = "s-results" style="height:50px;"> \
</div> ';

alert($(html).find('#se2').val());

注意您可以通过使用find 进一步检查上面示例中的代码工作不会工作在此jsfiddle example 上使用filter

【讨论】：

为什么不只是$('#se')？
是的，可以使用。
感谢您的建议，我尝试了 find() 而不是过滤器 bt 仍然无法按我想要的方式工作.....我有一个问题。为了在返回的 html 中查找任何文本，是否需要触发事件，例如 onclick 事件或 onkeyup....？？
请在此处查看演示或制作小提琴？
从 jquery 返回的数据是表格格式.....我只是想要一种方法，以便我可以再次过滤或查找该数据表中的任何文本......从 jquery 和 php 返回...... ..

【解决方案2】：

问题

您已成功将result 添加到#s-results：

$('#s-results').html(result).show();

然后尝试像这样从添加的results中选择#se2，没有成功：

$(result).filter('#se2');

没用是因为你不是从第二步添加的dom中得到的。

实际上，它正在创建一个具有相同result 变量的新的未附加 dom。

解决办法

要从添加的result 内容中正确选择#se2，请尝试以下操作：

$('#s-results').filter('#se2');

或者，按照@zerkms 的建议，您可以直接通过以下方式选择它：

$('#se2');

这些可能性会起作用，因为现在它正在引用附加到 dom 的东西，它将搜索您在第一步中添加的相同元素。

【讨论】：

【解决方案3】：

您可以尝试使用ajax，如下所示：

$(document).ready(function () {
    $('#s-results').load('get_report1.php').show();
    $('#search-btn').click(function () {
        $.ajax({
            type: "POST",
            url: "get_report1.php",
            data: {
                name: $("#fn").val()
            },
            beforeSend: function () {
                //do stuff like show loading image until you get response
            },
            success: function (result) {
                $('#s-results').html(result).show();
            },
            error: function (e) {
                alert("Error in ajax call " + e);
            }
        });
    });
});

注意：当您每次点击search-btn时，它会调用get_report1.php文件并根据您传递的文本框值检索数据库。我假设在 ge_report1.php 文件中，您使用的是 tex-box 值，例如：$_POST['name']，并且您正在使用 MySQL 搜索查询获取数据。

【讨论】：

【解决方案4】：

您可以使用JQuery find 代替过滤器。

$(result).find('#se2');

然后像这样添加到你的变量中

var your_element = $('#se2');

【讨论】：