الإشارة إلى div داخل div بنفس المعرف الموجود داخل آخر

StackOverflow https://stackoverflow.com/questions/617450

سؤال

كيف يمكنني الإشارة إلى div المتداخل بالمعرف عندما يكون له نفس معرف div المتداخل في div المسمى بالمثل

على سبيل المثال

<div id="obj1">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

أريد الحصول على HTML الداخلي للفوقية

document.getElementById('obj1').getElementById('Meta').getElementsByTagName('meta')

لا يعمل

هل كانت مفيدة؟

المحلول

ويجب أن تستخدم إلا معرفات عندما يكون هناك واحد من هذا البند على الصفحة، سواء كان SPAN، DIV أو أيا كان. صنف هو ما يجب عليك استخدام لحين قد يكون لديك عنصر التكرار.

والقانون هناك لا تعمل بسبب كنت في اشارة الى عنصر من هوية فريدة من نوعها، ولكن لديها أكثر من واحد على الصفحة.

نصائح أخرى

ويفترض أن تكون فريدة من نوعها معرف.

وأكره أن نشير إلى ما هو واضح، ولكن في المثال الخاص بك، obj1_Meta وobj2_Meta هي فريدة من نوعها في الهوية، وحتى إذا كان هذا هو الحال في قانون العمل الخاص بك:

document.getElementById('obj1_Meta').getElementsByTagName('meta')[0].innerHTML;

وسيعمل كما هو موضح. كما شيك مزدوج، هل تعتقد أن هذا أكثر؟

إذا لم يكن كذلك، المشكله ...

وأما "سيئة" أو "خطأ" كرمز الخاص بك، وهو الخيار الذي سيعمل هو استخدام الإطار جافا سكريبت مثل مسج. مرة واحدة قمت بتضمين ذلك، يمكنك الحصول على العناصر بتمريرها محدد CSS (حتى لو كانت غير صحيحة لغويا) مثل ذلك:

$('#obj1 #obj1_Meta meta').html()

و$ () هي طريقة مسج في القول document.getElementById () ... على المنشطات. هتمل () هو ما يعادلها من .innerHTML

وأطر أخرى، مثل PrototypeJS وموتولز أيضا توفير وظائف مماثلة.

ونموذج على سبيل المثال:

$$('#obj1 #obj1_Meta meta').innerHTML;//note the double $'s

وأطر انقاذ الكثير من الوقت والمتاعب فيما يتعلق متصفح التوافق "المفقود" جافا سكريبت الأساليب (مثل getElementsByClassName) والترميز AJAX بسرعة. هذه الأمور تجعل لهم فكرة جيدة لاستخدام على أي حال.

من المفترض أن تكون المعرفات فريدة من نوعها، وأن تستخدم الفئات بذكاء.

<div id="obj1" class="obj">
    <div id="obj1_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2" class="obj">
    <div id="obj2_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>
  • .obj = يستهدف كلا العنصرين
  • #obj1.obj = يستهدف الأول فقط
  • #obj1.obj_Meta = أهداف obj1 DIV الداخلية
  • #obj2.obj = يستهدف الثاني فقط
  • #obj2.obj_Meta = أهداف obj2 DIV الداخلية

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

لفي HTML كنت قد أعطيت، وهذا ينبغي العمل:

document.getElementById('obj1').getElementsByTagName('div')[0].getElementsByTagName('meta');

وفقط تجاهل هوية وهمية على الداخلية شعبة وسهولة الحصول عليها من خلال اسم العلامة. يجب أيضا أن تكون قادرة على تجاهل شعبة الداخلي تماما، منذ getElementsByTagName تفتيش كامل الشجرة الفرعية:

document.getElementById('obj1').getElementsByTagName('meta');

وأما السمة معرف هو معرف على مستوى ثيقة فريدة من نوعها، ربما يجب عليك مساحة هويات الخاص بك.

<div id="obj1">
    <div id="obj1_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="obj2_Meta">
        <meta></meta>
    </div>
</div>

document.getElementById('obj1_Meta').getElementsByTagName('meta')
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top