Question

我对JS很不错。我需要使用html代码选择data-parent =“16”的元素：

    <div class="filter-options" id="able-filter">
    <div class="Xhaut" id="Xhaut">
    <a class=" active" data-dimension="region" data-filter="all" href="javascript:void(0)">All</a>
    <a data-term_id="18" data-parent="17" data-filter="villebelge1" href="javascript:void(0)" class="a" data-dimension="region">villeBelge1</a>
    <a data-term_id="19" data-parent="17" data-filter="villebelge2" href="javascript:void(0)" class="a" data-dimension="region">villeBelge2</a>
    <a data-term_id="20" data-parent="17" data-filter="villebelge3" href="javascript:void(0)" class="b" data-dimension="region">villeBelge3</a>
    <a data-term_id="21" data-parent="16" data-filter="villenord1" href="javascript:void(0)" class="b" data-dimension="region">villenord1</a>
    <a data-term_id="22" data-parent="16" data-filter="villenord2" href="javascript:void(0)" class="c" data-dimension="region">villenord2</a>
    <a data-term_id="23" data-parent="15" data-filter="villesud1" href="javascript:void(0)" class="c" data-dimension="region">villeSud1</a>
    <a data-term_id="24" data-parent="15" data-filter="villesud2" href="javascript:void(0)" class="d" data-dimension="region">villeSud2</a>
    <a data-term_id="25" data-parent="15" data-filter="villesud3" href="javascript:void(0)" class="d" data-dimension="region">villeSud3</a>

    </div>
    </div>

我试过这种事：

    var Xhaut = $('#Xhaut').find('a');
    window.console && console.log(Xhaut);
    window.console && console.log(Xhaut.siblings(".d")); // thi it ok I have villesud2 and villesud3, it's ok because I use a class selector

    // But how can I select all element with data-parent="16" (not class="d", but data-parent="16")

我做了一个小提琴： http://jsfiddle.net/bakalegum/2DGHD/

很多。

编辑：为你的答案而战！

Answer 1

你可以这样做：

var Xhaut = $('#Xhaut').find('[data-parent=16]');

http://api.jquery.com/attribute-equals-selector/

Answer 2

没有jQuery：

var Xhaut = document.querySelectorAll('[data-parent="16"]');

https://developer.mozilla.org/docs/DOM/Document.querySelectorAll

Answer 3

只要扩展tymeJV的内容，你就可以将其缩短一点：

var Xhaut = $('[data-parent=16]','#Xhaut');

在javascript上，如何使用兄弟姐妹不在class属性上

3 个答案: