jQuery特定のデータ属性値を持つ要素のスタイルを取得

Question

私はbxSliderを使用しており、pagerCustomオプションを使用してカスタムページャを作成しました。ページャをサムネイルページャのように見せて、各スライドのスタイルをコピーして各ページャに追加しようとしました。例：ポケットベル1は、スライド2のためのスライド1、ページャ2のスタイルを持っている必要があり、そう..に

この

は私がページャとして、今持っているものです。

<div class="custom-pager"> 
<a data-slide-index="0" href="" class="">1</a> 
<a data-slide-index="1" href="" class="active">2</a> 
<a data-slide-index="2" href="" class="">3</a> 
<a data-slide-index="3" href="" class="">4</a> 
</div> 

と私のjQueryのコードがありますこの：

$('#slider .custom-pager a').each(function(){ 
var test = $(this).parent().index(); 
$(this).attr('style', $('*[data-slide=" ' + test + ' "]').attr('style')); 
}); 

私は、各bxSliderリストへのデータのスライドを追加しました：

<ul class="bxslider" style="width: auto; position: relative;"> 
    <li data-slide="0" style="background: transparent url(&quot;_assets_/images/slide-1.jpg&quot;) no-repeat scroll center center/cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 0; display: none;"></li> 
    <li data-slide="1" style="background: transparent url(&quot;_assets_/images/slide-2.jpg&quot;) no-repeat scroll center center/cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 50; display: list-item;"></li> 
    <li data-slide="2" style="background: transparent url(&quot;_assets_/images/slide-1.jpg&quot;) no-repeat scroll center center/cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 0; display: none;"></li> 
    <li data-slide="3" style="background: transparent url(&quot;_assets_/images/slide-2.jpg&quot;) no-repeat scroll center center/cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 0; display: none;"></li> 
</ul> 

Answer 1

この

$('*[data-slide=" ' + test + ' "]') 

は間違った二つの方法であなたのhtmlに基づいています。

• あなたの属性は、「データ・スライド・インデックス」ではない「データ・スライド」です。
• あなたは、等号の後に必要ではない余分なスペースがあります（*で始める必要もありません）。余分なスペースは、その値がたとえば'1'ではなく '1'。

あなたの選択で何も選択されていません。 あなたは使用することができます。

$('[data-slide-index="' + test + '"]') 

また、$（あれば検討する）、CSS（）あなたに便利です。あなたが達成しようとしていることは本当にわかりません。

Answer 2

​​3210に渡されたインデックスを使用する場合は、testを使用する必要はありません。また、@TigOldBittiesで述べたように、セレクタに余分なスペースがあります。お試しください

$('#slider .custom-pager a').each(function(index){ 
    $(this).attr('style', $('[data-slide="' + index + '"]').attr('style')); 
});