同じクラス名を持つ2つのjqueryスライダですが、問題はスライダの移動です（2）

Question

hereの質問を参照してください。

<h1>Font Size</h1> 

<div class="slider"></div> 
<p class="font-display">The quick brown fox jumps over the lazy dog</p> 

<div class="slider"></div> 
<p class="font-display">The quick brown fox jumps over the lazy dog</p> 

---

$('.slider').slider({ 
    value:40, 
    min: 24, 
    max: 48, 
    step: 1, 
    slide: function(event, ui) { 
    $('#font_size').val(ui.value + ' px'); 
    $('.font-display').css('font-size', ui.value); 
    } 
}); 

編集：https://jsfiddle.net/8q8xhrr7/

これは、同じクラス名とスライダーフォントサイズは段落（.font-ディスプレイ）に示されているの2つのスライダーを持っている、しかし、私は選択した場合スライダー私はそれのフォントサイズを変更したいだけですしかし、現在両方とも変化しています。

Answer 1

font-displayはスライダーの後に常にある場合、それは必ずしもあなたが$(this).nextAll('.font-display:first').css('font-size', ui.value);

を探すために、次を指定することができ、次の要素でない場合は、$(this).next().css('font-size', ui.value);

jsfiddle

にあなたのjQueryを変更することができますjsfiddle

Answer 2

ここに：

https://jsfiddle.net/0epj2g83/5/

HTML：

<h1>Font Size</h1> 
<div> 
    <div class="slider"></div> 
    <p class="font-display">The quick brown fox jumps over the lazy dog</p> 
</div> 

<div> 
    <div class="slider"></div> 
    <p class="font-display">The quick brown fox jumps over the lazy dog</p> 
</div> 

CSS：

h1 { 
    font-family: Helvetica, Arial; 
    font-weight: bold; 
    font-size: 18px; 
} 

body, p{ 
    font-family: Helvetica, Arial; 
} 

JS：

$('.slider').slider({ 
    value:40, 
    min: 24, 
    max: 48, 
    step: 1, 
    slide: function(event, ui) { 
    var parent = $(this).parent(); 
    parent.find($('#font_size')).val(ui.value + ' px'); 
    parent.find($('.font-display')).css('font-size', ui.value); 
    } 
}); 

Answer 3

一つの方法は、最も近い要素を取得することです...（（最初に使用することができます）念のため）。

$(this).next('.font-display') 

または

$(this).closest(..) 

または親要素を取得し、その後（検索を使用）

$(this).parent(..).find(..) 

https://jsfiddle.net/0epj2g83/8/

これはあなたのWORです：このように

キングフィドーhttps://jsfiddle.net/8q8xhrr7/1/