根据属性选择第一个孩子

ollie314 发表于 Dev

ollie314

我希望能够选择在其中定义属性的特定子项集。

但是如何选择具有该属性的根选择器的第一个子级的子级 data-role

first-of-type 由于元素的类型，选择器不起作用。

在这里，我们有一个DOM示例。

<body>
    <div data-role="ca:panel" title="foo">
        <div data-role="ca:vbox" width="100%">
            <div data-role="ca:form">
                <div data-role="ca:formitem">
                    <div data-role="ca:hbox">
                        <input data-role="ca:textinput">
                        <div data-role="ca:menu"></div>
                    </div>
                </div>
                <div data-role="ca:formitem">
                    <input data-role="ca:passwordinput">
                </div>
                <div data-role="ca:formitem">
                    <select data-role="ca:combobox">
                        <option>[...]</option>
                    </select>
                </div>
            </div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <span data-role="ca:label"></span>
                        </td>
                        <td>
                            <button data-role="ca:button"></button>
                        </td>
                        <td>
                            <button data-role="ca:button"></button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

</body>

我的过滤器应仅选择

<div data-role="ca:form">
<span data-role="ca:label"></span>
<button data-role="ca:button"></button>
<button data-role="ca:button"></button>

它在任何情况下都应该起作用，这意味着，它不应链接到dom的特定结构，而必须使用data-role作为“选择器”。

我不是相关的jQuery开发人员。我尝试了一些选择器，例如，$('[data-role]:first-of-type');但它不起作用。

您是否有一个选择合适孩子的想法？

注意：寻找第一个父母不是问题。

去编码

只要您有起始节点，就可以使用过滤器进行此操作：

JSFilter：http : //jsfiddle.net/TrueBlueAussie/2uppww9s/5/

var root = $('[data-role="ca:vbox"]');
var matches = root.find('[data-role]').filter(function(){
    return $(this).parentsUntil(root, '[data-role]').length == 0;
});
alert(matches.length);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。