クラスとデータ属性でdivを更新する方法

Question

divを更新する際に、属性値が変数であるクラス名とデータ属性を選択しようとしています。 （同様の質問への）他のSOの答えは、このアプローチを提案した：

$(".SampleClass [id='"+selectedId + "']").text("Updated text");

それをテストする場合、しかし、動作するように表示されません。 2番目のdivの内容に「この特定のdivが更新されました」と表示される必要があります。代わりにdivには "Div 2 is unchanged"が含まれています。

希望する結果を得るにはどのようなアプローチをとるべきですか？この例は単純なHTMLですが、私はこれを動的なページに適用しようとしています。そのため、私はそれをハードコーディングしていません。

<div class="SampleClass" data-id="1">Div 1 is unchanged</div> 
<div class="SampleClass" data-id="2">Div 2 is unchanged</div> 
<div class="SampleClass" data-id="3">Div 3 is unchanged</div> 

<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     // test basic functionality: div with data-id=2 should be updated 

     var selectedId = 2; 
     $(".SampleClass [id="+selectedId + "]").text("This specific div has been updated."); 
    }); 
</script> 

Answer 1

var selectedId = 2; 
 
$(".SampleClass[data-id=" + selectedId + "]").text("This specific div has been updated.");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="SampleClass" data-id="1">Div 1 is unchanged</div> 
 
<div class="SampleClass" data-id="2">Div 2 is unchanged</div> 
 
<div class="SampleClass" data-id="3">Div 3 is unchanged</div>

1. .SampleClass[data-id=" + selectedId + "]の間にスペースを入れないこと、あなたがスペースを入れた場合には、データの属性IDを持つクラス.SampleClassの子を意味しています。
2. 使用data-idセレクタはないid