لماذا لم يعمل this في هذا الكود

أنشأت كود بسيط يقوم بتحlيل بيانات من رابط json لكل أيدي لكن عند التنفيد لا يقوم الكود بطبع كل قيمة لكل أيدي ، انما يقوم بتطبيق نفس القيمة على كل العناصر

الكود التالي :

HTML

<div class='grid-posts'>
<div data-sid="v1" id="vcount">..</div>
<div data-sid="v2" id="vcount">..</div>
<div data-sid="v3" id="vcount">..</div>
<div data-sid="v4" id="vcount">..</div>
<div data-sid="v5" id="vcount">..</div>

</div> 

JS

$('.grid-posts #vcount').each(function(){
var sid= $(this).attr('data-sid');
$.getJSON("api/"+sid, function(response) {
$(this).text(response.value);
});
});

السلام عليكم ورحمة الله وبركاته

اهلا بك أخي الكريم المشكلة لديك في كود الHtml

خاصية الid هي خاصية مميزة للعنصر ولذلك لا يمكنك إشراك أكثر من عنصر في نفس ال id

فعليك أن تقوم بعمل id مختلف لكل عنصر في صفحة الHtml حتى يستطيع فهم ما تريد

وبالنسبة لتحديدهم في الjQuery فيمكنك أن تحدد اختيار كل الأبناء للعنصر الرئيسي

عليكم السلام ورحمة الله وبركاته

اخي حتى لو غيرت الكود نحو هذا الشكل يعني الكلاس بدل الايدي

<div class='grid-posts'>
<div data-sid="v1" class="vcount">..</div>
<div data-sid="v2" class="vcount">..</div>
<div data-sid="v3" class="vcount">..</div>
<div data-sid="v4" class="vcount">..</div>
<div data-sid="v5" class="vcount">..</div>
</div>

يعطيني نفس الخلل

هل بإمكانك إطلاعي على الملفات لأقوم بالتجربة عليها ؟