jsFiddle

Question

我希望能够选择一个特定的子集，其中定义了一个属性。

但是如何选择具有属性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的特定结构，并且必须使用数据角色作为“选择器”。

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

您是否有想法选择合适的孩子。

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

Answer 1

只要您有一个开始节点，就可以使用过滤器来执行此操作：

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);

Answer 2

您可以使用：first pseudonym选择元素的第一次出现，例如：

var elm = $('*[data-role="ca:form"]:first');

这将选择*任何类型的DOM元素，其数据角色匹配＆＃34; ca：form＆＃34;

由于你想要返回两个具有相同数据角色的按钮，我们不能使用＆＃34;：first＆＃34;为了那个原因。在这种情况下，您必须得到匹配的第一个孩子

var elm = $('td').children('button[data-role="ca:button"]:first');

这将查看所有TD标签的子元素，并找到第一个带有数据角色匹配的按钮＆＃34; ca：button＆＃34;

Answer 3

如果您想要首先了解整体规格，那么您只需在所有三种标签类型上使用选择器并按以下方式对其进行过滤：

$('div, span, button').filter(function(i){
    if (this.tagName == 'DIV' && $(this).data('role') == 'ca:form') return true;
    if (this.tagName == 'SPAN' && $(this).data('role') == 'ca:label') return true;
    if (this.tagName == 'BUTTON' && $(this).data('role') == 'ca:button') return true;
}).first();

使用.first抓取第一个。

此外，过滤器可以百万种方式使用，以获得您想要的东西，听起来它可能会让您达到您的需要。只需在if / for / switch语句中设置您要过滤的内容，并在匹配的项目上返回true。

jsFiddle

但是，如果你想要的第一个，你可以做类似的事情：

$('div[data-role="ca:form"]:first, span[data-role="ca:label"]:first, button[data-role="ca:button"]:first')

如果以某种方式驱动变量，只需使用字符串连接。

根据属性选择第一个孩子

这里我们有一个DOM样本。

我的过滤器应该只选择

3 个答案:

jsFiddle

jsFiddle