Question

我正在尝试创建一个Jquery插件（findFirst()）来查找具有给定特征的第一个子节点（位于find()和children()函数中间的内容。例如，鉴于此标记：

<div id="start">
    <div>
        <span>Hello world</span>
        <ul class="valid-result"> ... </ul>
        <ul class="valid-result">
            <li>
                <ul class="not-a-result"> ... </ul>
            </li>
        </ul>
        <div>
            <ul class="valid-result"> ... </ul>
        </div>
    </div>
</div>

如果您要求$("#start").findFirst('ul')，则应返回我使用 valid-result 类标记的所有 ul 列表，但不返回 ul 类 not-a-result 。它是，这个函数必须找到与给定选择器匹配的第一个元素，而不是与该选择器匹配的内部元素。

这是我第一次尝试编写Jquery函数代码，而我已经阅读的内容并没有对我有太多帮助。我开发的功能是：

jQuery.fn.findFirst = function (sel) { return this.map(function() { return $(this).children().map(function() { if ($(this).is(sel)) { return $(this); } else { return $(this).findFirst(sel); } }); }); }

它在尝试返回预期结果的意义上起作用，但它返回结果的格式对我来说非常罕见。我想这个问题是我对Jquery不了解的。在这里，我正在测试the JFiddle。

修改

$("#start").findFirst('ul')之后的预期结果一组，所有UL都具有类'valid-result'但是它不可能使用此类，因为它不存在于真实案例（只是试图解释结果）。

这不等于first（），因为first只返回一个元素！

Answer 1

您不需要构建插件。使用jQuery内置.first()并按照Mark的建议，你也可以使用第一个选择器:first

$("#yourselector ul").first();

以下是您案例中的用法

$("#start").find("ul").first().css("background", "red");
   //For Short $("#start ul").first()

要使用类过滤器，请使用属性选择器

$("#start").find("ul[class=valid-result]").first().css("background", "red");
   //For Short $("#start ul[class=valid-result]").first()

Demo

<强>更新

如果您只想使用课程valid-result突出显示外部ul，则根本不需要first()

$("#start ul[class=valid-result]").css("background", "red");

但是，由于内部ul也会在我的示例中共享背景，因此您可能必须为内部ul设置不同的背景。这是example

更新2

如果您想选择<ul>的第一个级别，那么

$("#start div").chilrent("ul"); //this will return the first level of ul inside the div

Answer 2

你可以这样做：

var selector='ul';

var $results= $('#start '+selector).not( selector +' '+selector);

not()方法将排除与选择器匹配但同时也是同一选择器的后代的元素

Answer 3

var result = $('#selector:first');

Answer 4

选择器都为您的示例提供结果：

~~$（'＃start＆gt; *＆gt; ul'） $（ '＃开始'）儿童（）找到。（ '＆GT; UL'） $（ '＃开始'）。子女（ 'DIV'）。找到（ '跨度'）。兄弟姐妹（ 'UL'）~~

<击>
$('#start').children().find('span').siblings('ul') $('#start').find('span').siblings('ul')

编辑：另一个例子：

$('#start>div>span').siblings('ul') $('#start').find('div').find('span').siblings('ul') $('#start>div>span').siblings('ul')

<击>

WOOPS，刮擦所有这些，我错过了div中的最后一个内部UL ......

所以：这个（我测试过了）得到那个div的孩子但不在里面

$('#start div').find('>ul') $('#start div>ul')

这说法是找到一个DIV的直接后代的UL

如何开发一个Jquery插件来查找与选择器匹配的第一个子节点？

4 个答案: