javascript - وحدة - طريقة جافا سكريبت الصرفة لف المحتوى في div




لم تحمِّل هذه الصفحة خرائط google بشكل صحيح راجع وحدة تحكم جافا سكريبت للاطلاع على التفاصيل التقنية (5)

wrapInner محتوى علامة متعددة

function wilWrapInner(el, wrapInner) {
  var _el = [].slice.call(el.children);
  var fragment = document.createDocumentFragment();
  el.insertAdjacentHTML('afterbegin', wrapInner);
  var _wrap = el.children[0];
  for (var i = 0, len = _el.length; i < len; i++) {
    fragment.appendChild(_el[i]);
  }
  _wrap.appendChild(fragment);
}

رابط تجريبي Jsbin

أرغب في التفاف كل العقد داخل div #slidesContainer باستخدام JavaScript. أعرف أنه يتم بسهولة في مسج ، لكنني مهتم بمعرفة كيفية القيام بذلك مع JS النقي.

هنا هو الكود:

<div id="slidesContainer">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
    <div class="slide">slide 4</div>
</div>

أرغب في التفاف divs بفئة من "الشريحة" بشكل جماعي داخل div آخر مع id="slideInner" .


أحب التعامل مع عناصر dom مباشرة - createElement و appendChild و removeChild إلخ بدلاً من حقن السلاسل كـ element.innerHTML . تعمل هذه الاستراتيجية ، لكنني أعتقد أن أساليب المتصفح الأصلي أكثر مباشرة. بالإضافة إلى ذلك ، فإنها تُرجع قيمة عقدة جديدة ، مما يوفر لك من مكالمة getElementById أخرى غير ضرورية.

هذا بسيط حقًا ، وسيحتاج إلى إرفاقه بنوع من الأحداث للاستفادة منه.

wrap();
function wrap() {
    var newDiv = document.createElement('div');
    newDiv.setAttribute("id", "slideInner");
    document.getElementById('wrapper').appendChild(newDiv);
    newDiv.appendChild(document.getElementById('slides'));
}

jsFiddle

ربما هذا يساعد على فهمك لهذه المشكلة مع الفانيليا js.


إذا كانت "الشرائح" موجودة دائمًا في slidesContainer ، فيمكنك القيام بذلك

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;

مثل BosWorth99 ، أود أيضًا التعامل مع عناصر dom مباشرة ، وهذا يساعد في الحفاظ على جميع سمات العقدة. ومع ذلك ، أردت الحفاظ على موقف العنصر في dom وليس فقط إلحاق نهاية incase كان هناك أشقاء. هنا هو ما فعلته.

var wrap = function (toWrap, wrapper) {
    wrapper = wrapper || document.createElement('div');
    toWrap.parentNode.appendChild(wrapper);
    return wrapper.appendChild(toWrap);
};

نصيحة عامة جيدة لمحاولة القيام بشيء تفعله عادةً مع jQuery ، دون jQuery ، هي النظر إلى مصدر jQuery . ماذا يعملون؟ حسنًا ، فهم يقومون بإمساك جميع الأطفال ، وإلحاقهم بعقدة جديدة ، ثم إلحاق تلك العقدة داخل الوالد.

إليك طريقة بسيطة بسيطة للقيام بالتحديد بما يلي:

const wrapAll = (target, wrapper = document.createElement('div')) => {
  ;[ ...target.childNodes ].forEach(child => wrapper.appendChild(child))
  target.appendChild(wrapper)
  return wrapper
}

وإليك كيفية استخدامه:

// wraps everything in a div named 'wrapper'
const wrapper = wrapAll(document.body) 

// wraps all the children of #some-list in a new ul tag
const newList = wrapAll(document.getElementById('some-list'), document.createElement('ul'))




wrap