jQuery jquery中查找和过滤的区别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10378757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:12:24  来源:igfitidea点击:

Difference between find and filter in jquery

jqueryfindweb-crawler

提问by Krishna Deepak

I'm working on fetching data from wiki pages. I'm using a combination of phpand jqueryto do this. First I am using curlin phpto fetch page contents and echoing the content. The filename is content.php:

我正在从 wiki 页面获取数据。我使用的组合php,并jquery做到这一点。首先,我使用curlinphp来获取页面内容并回显内容。文件名是content.php

$url = $_GET['url'];
$url = trim($url," ");
$url = urldecode($url);
$url = str_replace(" ","%20",$url);

echo "<a class='urlmax'>".$_GET['title']."</a>";
echo crawl($url);

Then jQueryis used to find the matched elements.

然后jQuery用于查找匹配的元素。

$.get("content.php",{url:"http://en.wikipedia.org/w/index.php?action=render&title="+str_replace(" ","_",data[x]),title:str_replace(" ","_",data[x])},function(hdata){
                        var imgs = $(hdata).find('a.image img');
                        var ent = $(hdata).filter('a.urlmax');


                        ent = $(ent[0]).text();


});

I was able to successfully get images but for the variable ent when I use find instead of filter, it's returning an empty array. Only filter is working. Why is this?

我能够成功获取图像,但是对于变量 ent,当我使用 find 而不是 filter 时,它返回一个空数组。只有过滤器在工作。为什么是这样?

Edit: I know the basic difference between find and filter. Here both the a.image imgand a.urlmaxare descendats of the hdata. Then why find does not work on a.urlmax. Not a.urlmaxalone it's not working on any other class or id

编辑:我知道查找和过滤器之间的基本区别。这里的a.image imga.urlmax都是hdata. 那为什么 find 对a.urlmax. 不仅如此a.urlmax,它不适用于任何其他类或 ID

回答by Jere

.find() http://api.jquery.com/find/

.find() http://api.jquery.com/find/

Get the descendants of each elementin the current set of matched elements, filtered by a selector, jQuery object, or element.

获取当前匹配元素集中每个元素后代,由选择器、jQuery 对象或元素过滤。

Filter, on the other hand, works on the currently matched elements. That's why filter worked but find did not (you needed to look at the current element).

另一方面,过滤器适用于当前匹配的元素。这就是为什么 filter 有效但 find 没有的原因(您需要查看当前元素)。

回答by mprabhat

filterwill select subset of element from the selected element

filter将从所选元素中选择元素的子集

findwill select descendent/children of selected element

find将选择所选元素的后代/子元素

To make it more clear filter will search through all element whereas find will search only in the descendent list

为了更清晰,过滤器将搜索所有元素,而 find 将仅在后代列表中搜索

回答by Mohamad Hamouday

.find()

。找()

It will returns descendant elements of the selected element.

它将返回所选元素的后代元素。

Exemple (jsfiddle):

示例jsfiddle):

    <style>
      .Cell{
         margin: 15px;
         width: 400px;
         border: 2px solid lightgrey;

      }
      .Cell * {
         display: block;
         border: 2px solid lightgrey;
         color: lightgrey;
         padding: 5px;
         margin: 10px;
    }
    </style>

    <div class='Cell Plus'>div (1)
      <div class='Plus'>Child</div>
    </div>

    <div class='Cell Plus'>div (2)
      <div class='Plus'>Child</div>
    </div>

JS:

JS:

$(".Cell").find(".Plus").css({"color": "red", "border": "2px solid red"});

Result:

结果:

Find result

查找结果



.filter()

。筛选()

It will returns elements that match a certain criteria.

它将返回符合特定条件的元素。

Using the same html above:

使用上面相同的 html:

$(".Cell").filter(".Plus").css({"color": "red", "border": "2px solid red"});

Result:

结果:

Filter result

过滤结果