回答:
完全な答えではありませんが、IEを除くほとんどのブラウザー(デスクトップとモバイルの両方)ですでに利用可能なW3C Selector API v.2に注意する必要があります(Edgeがサポートしているようです)。完全なサポートリストを参照してください。
function(elem) {
return elem.querySelectorAll(':scope > someselector');
};
:scope
は、まだdrafts.csswg.org/selectors-4/#the-scope-pseudoで指定されています。これまでのところ、<style scoped>
削除されたのは属性のみです。それ:scope
が削除にもつながるかどうかは不明です(これ<style scoped>
はの重要な使用例でした:scope
)。
できません。開始点をシミュレートするセレクターはありません。
jQueryがそれを行う方法(qsa
好みの動作ではないため)elem
は、IDがあるかどうかを確認し、IDがない場合は一時的にIDを追加してから、完全なセレクター文字列を作成します。
基本的には次のようにします:
var sel = '> someselector';
var hadId = true;
if( !elem.id ) {
hadID = false;
elem.id = 'some_unique_value';
}
sel = '#' + elem.id + sel;
var result = document.querySelectorAll( sel );
if( !hadId ) {
elem.id = '';
}
これは確かにjQueryコードではありませんが、私が覚えている限りでは、基本的に彼らは何をしているのでしょう。この状況だけでなく、ネストされた要素のコンテキストからセレクターを実行している状況でも。
avetiskた挙げセレクタAPI 2つの用途の:scope
擬似セレクタ。
これを(をサポートするquerySelector
)すべてのブラウザで機能させるには、ここにポリフィルがあります。
(function(doc, proto) {
try { // check if browser supports :scope natively
doc.querySelector(':scope body');
} catch (err) { // polyfill native methods if it doesn't
['querySelector', 'querySelectorAll'].forEach(function(method) {
var nativ = proto[method];
proto[method] = function(selectors) {
if (/(^|,)\s*:scope/.test(selectors)) { // only if selectors contains :scope
var id = this.id; // remember current element id
this.id = 'ID_' + Date.now(); // assign new unique id
selectors = selectors.replace(/((^|,)\s*):scope/g, '$1#' + this.id); // replace :scope with #ID
var result = doc[method](selectors);
this.id = id; // restore previous id
return result;
} else {
return nativ.call(this, selectors); // use native code for other selectors
}
}
});
}
})(window.document, Element.prototype);
node.querySelector(':scope > someselector');
node.querySelectorAll(':scope > someselector');
歴史的な理由から、私の以前の解決策
すべての回答に基づく
// Caution! Prototype extending
Node.prototype.find = function(selector) {
if (/(^\s*|,\s*)>/.test(selector)) {
if (!this.id) {
this.id = 'ID_' + new Date().getTime();
var removeId = true;
}
selector = selector.replace(/(^\s*|,\s*)>/g, '$1#' + this.id + ' >');
var result = document.querySelectorAll(selector);
if (removeId) {
this.id = null;
}
return result;
} else {
return this.querySelectorAll(selector);
}
};
使用法
elem.find('> a');
Date.now()
古いブラウザではサポートされておらず、置き換えることができますnew Date().getTime()
調べている要素のタグ名がわかっている場合は、それをセレクターで使用して目的の機能を実現できます。
たとえば、<select>
とを持つが<option>
あり<optgroups>
、<option>
その直下の子であるs のみが必要で、内部のは必要ない場合<optgoups>
:
<select>
<option>iPhone</option>
<optgroup>
<option>Nokia</option>
<option>Blackberry</option>
</optgroup>
</select>
したがって、select要素への参照があると、次のようにして(驚くべきことに)直接の子を取得できます。
selectElement.querySelectorAll('select > option')
Chrome、Safari、Firefoxで動作するようですが、IEではテストしていません。= /
<ul id="start"> <li>A</li> <li> <ul> <li>b</li> <li>c</li> </ul> </li> </ul> var result = document.getElementById('start').querySelectorAll('ul>li');
-> 4つのli要素がすべて選択されます!
<select>
は同じ親に二つの要素があったことを禁じました。
最終的に直接の子を検索したい場合(例:> div > span
ではなく)、Element.matches()を試すことができます。
const elems = Array.from(elem.children).filter(e => e.matches('.my-class'))
請求
個人的に私はパトリックdwから答えを受け取り、彼の答えを+1しました。私の答えは代替の解決策を探すことです。私はそれが反対投票に値するとは思わない。
これが私の試みです:
function q(elem){
var nodes = elem.querySelectorAll('someSeletor');
console.log(nodes);
for(var i = 0; i < nodes.length; i++){
if(nodes[i].parentNode === elem) return nodes[i];
}
}
http://jsfiddle.net/Lgaw5/8/を参照してください
querySelector
つまり、それは:eq()
使用できません。可能であっても、セレクターは、親のインデックス(では、を取得する場所):eq()
ではなく、ページの外観に対応する要素を返します。:eq()
idx
elem
がインデックス4にあるが、前の兄弟には異なるtagName
があるが、その内部にと一致する要素がネストされている場合tagName
、そのネストされた要素は、ターゲットにしている要素の前に結果に含まれ、再びスローされますインデックス。ここでは一例です
$('> someselector', elem);
; o)
それは私のために働きました:
Node.prototype.search = function(selector)
{
if (selector.indexOf('@this') != -1)
{
if (!this.id)
this.id = "ID" + new Date().getTime();
while (selector.indexOf('@this') != -1)
selector = selector.replace('@this', '#' + this.id);
return document.querySelectorAll(selector);
} else
return this.querySelectorAll(selector);
};
直接の子を検索する場合は、>の前に@thisキーワークを渡す必要があります。
以下は、直接の子に対してのみCSSセレクタークエリを実行するための簡略化された一般的な方法です"foo[bar], baz.boo"
。
var count = 0;
function queryChildren(element, selector) {
var id = element.id,
guid = element.id = id || 'query_children_' + count++,
attr = '#' + guid + ' > ',
selector = attr + (selector + '').replace(',', ',' + attr, 'g');
var result = element.parentNode.querySelectorAll(selector);
if (!id) element.removeAttribute('id');
return result;
}
*** Example Use ***
queryChildren(someElement, '.foo, .bar[xyz="123"]');
要素にIDがあるかどうかを確認し、そうでない場合はランダムIDを追加して、それに基づいて検索します
function(elem) {
if(!elem.id)
elem.id = Math.random().toString(36).substr(2, 10);
return elem.querySelectorAll(elem.id + ' > someselector');
};
同じことをします
$("> someselector",$(elem))