كيف أقوم بتعيين نص DIV الطفل داخل مكرر؟

Question

لدي مكرر يحتوي على مقتطف HTML التالي:

<div id='parent'>
    <div id='child1'/>
    <div id='child2'>
         <script type="text/javascript" src="script.js"></script>
    </div>
</div>

أرغب في تحديد div الموسوم بـ "parent" باستخدام وظيفة داخل script.js وتعيين HTML الداخلي لـ div بالمعرف "child1".

يجب أن يبدو HTML النهائي الخاص بي كما يلي:

<div id='parent'>
    <div id='child1'>This inner text was set by jQuery</div>
    <div id='child2'>
        <script type="text/javascript" src="script.js"></script>
    </div>
</div>

كيف أفعل ذلك باستخدام jQuery؟

Answer 1

أولاً، لا يمكنك ترميز HTML الخاص بك بهذه الطريقة في مكرر.لا يمكنك تعيين نفس المعرفات لعناصر متعددة في الصفحة.سيحتاج HTML الخاص بك إلى استخدام الفئات لتحديد الهوية، إذا قمت بتعريفها على الإطلاق.

<div class="parent">
  <div class="child1"><div>
  <div class="child2">Click Me<div>
</div>

لا تملك الوظائف الموجودة في علامة البرنامج النصي أي طريقة لمعرفة مكان وجودها في DOM مقارنة بكل شيء آخر.ستحتاج إلى ربط استدعاء الوظيفة ببعض العناصر حتى تتمكن من استخلاص علاقات DOM النسبية بها.أسهل طريقة هي استخدام jQuery (أو إطار عمل آخر) لإضافة بعض المعالجات إلى العناصر.

$(function() {
    $('.child2').click( function() {
        $(this).parent().find('.child1').html( 'some html' );
    });
});

ما ورد أعلاه سيضيف معالج النقر إلى كل DIV مع الفئة child2 وعند النقر عليه، سيتم العثور على DIV الأصلي (لاحظ أن الفصل غير ضروري على الأصل) ثم الطفل الصحيح الذي سيتم تحديث HTML الخاص به بناءً على فئته. لاحظ أيضًا أن البرنامج النصي أعلاه يحتاج فقط إلى إضافته إلى الصفحة مرة واحدة، وليس مرة واحدة لكل عنصر مكرر.

Answer 2

$('#parent').children('#child1').html('html goes here');

Answer 3

سؤالك ليس له معنى كبير.يمكنك فقط القيام بذلك:

$("#child1").html("blah");

لا تحتاج إلى مرجع ل #parent أو this.

لكن بافتراض أن الأمر لم يكن كذلك، هناك طرق متعددة يمكنك من خلالها العثور على عنصر متعلق به this:

$(this).children("#child1")

أو

$(this).find("#child1") // descendant, not just child

أو

$("#child1", this) // descendant, not just child