次のシナリオがあります。
var el = 'li';
<li>また、ページにはそれぞれdata-slide=number属性を持つ5があります（番号はそれぞれ1、2、3、4、5です）。
var current = $('ul').data(current);スライドが変更されるたびにマップされ、更新される現在アクティブなスライド番号を見つける必要があります。
これまでのところ、現在のスライドに一致するセレクターを作成しようとして、私の試みは失敗しました。
$('ul').find(el+[data-slide=+current+]);
何も一致/返さない…</p>
パーツをハードコーディングできない理由liは、これがユーザーがアクセスできる変数であり、必要に応じて別の要素に変更できるため、常にであるとは限らないためliです。
私が欠けているものについて何かアイデアはありますか？
の値をAttributeEqualsセレクターに挿入する必要がcurrentあります。
$("ul").find(`[data-slide='${current}']`)
古いJavaScript環境（ES5以前）の場合：
$("ul").find("[data-slide='" + current + "']");
すべてを入力したくない場合は、データ属性でクエリを実行する簡単な方法を次に示します。
$("ul[data-slide='" + current +"']");
参考：http ： //james.padolsey.com/javascript/a-better-data-selector-for-jquery/
[data-x = ...]で検索する場合は、jQuery.data（..）セッターでは機能しないことに注意してください。
$('<b data-x="1">' ).is('[data-x=1]') // this works
> true
$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false
$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true
代わりにこれを使用できます：
$.fn.filterByData = function(prop, val) {
return this.filter(
function() { return $(this).data(prop)==val; }
);
}
$('<b>').data('x', 1).filterByData('x', 1).length
> 1
document.querySelectorAll(`[data-slide='${current}']`);
質問がJQueryに関するものであることは知っていますが、読者は純粋なJSメソッドが必要な場合があります。
私はpsychobrmのfilterByData拡張機能をjQueryに改良しました。
以前の拡張機能がキーと値のペアを検索した場合、この拡張機能を使用すると、値に関係なく、データ属性の存在をさらに検索できます。
(function ($) {
$.fn.filterByData = function (prop, val) {
var $self = this;
if (typeof val === 'undefined') {
return $self.filter(
function () { return typeof $(this).data(prop) !== 'undefined'; }
);
}
return $self.filter(
function () { return $(this).data(prop) == val; }
);
};
})(window.jQuery);
使用法：
$('<b>').data('x', 1).filterByData('x', 1).length // output: 1
$('<b>').data('x', 1).filterByData('x').length // output: 1
// test data
function extractData() {
log('data-prop=val ...... ' + $('div').filterByData('prop', 'val').length);
log('data-prop .......... ' + $('div').filterByData('prop').length);
log('data-random ........ ' + $('div').filterByData('random').length);
log('data-test .......... ' + $('div').filterByData('test').length);
log('data-test=anyval ... ' + $('div').filterByData('test', 'anyval').length);
}
$(document).ready(function() {
$('#b5').data('test', 'anyval');
});
// the actual extension
(function($) {
$.fn.filterByData = function(prop, val) {
var $self = this;
if (typeof val === 'undefined') {
return $self.filter(
function() {
return typeof $(this).data(prop) !== 'undefined';
});
}
return $self.filter(
function() {
return $(this).data(prop) == val;
});
};
})(window.jQuery);
//just to quickly log
function log(txt) {
if (window.console && console.log) {
console.log(txt);
//} else {
// alert('You need a console to check the results');
}
$("#result").append(txt + "<br />");
}#bPratik {
font-family: monospace;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bPratik">
<h2>Setup</h2>
<div id="b1" data-prop="val">Data added inline :: data-prop="val"</div>
<div id="b2" data-prop="val">Data added inline :: data-prop="val"</div>
<div id="b3" data-prop="diffval">Data added inline :: data-prop="diffval"</div>
<div id="b4" data-test="val">Data added inline :: data-test="val"</div>
<div id="b5">Data will be added via jQuery</div>
<h2>Output</h2>
<div id="result"></div>
<hr />
<button onclick="extractData()">Reveal</button>
</div>またはフィドル： http： //jsfiddle.net/PTqmE/46/
jQueryとdata-*属性を使用して要素をフェッチしているときに、同じ問題に直面しました。
したがって、参考のために、最短のコードは次のとおりです。
これは私のHTMLコードです：
<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>
これは私のjQueryセレクターです：
$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.
このセレクター$("ul [data-slide='" + current +"']");は、次の構造で機能します。
<ul><li data-slide="item"></li></ul>
これ$("ul[data-slide='" + current +"']");は次の場合に機能しますが、
<ul data-slide="item"><li></li></ul>
$("ul").find("li[data-slide='" + current + "']");
これがうまくいくことを願っています
ありがとう
事前に要素タイプを知らなくてもこれを機能させる方法についての彼の元の質問に戻ると、次のようになります。
$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");