कब्जा एक वर्ग तत्व के बाद घटना लोड हो रहा है

Question

समाप्त हो गया है मैं एक div कि वर्गों शामिल है। क्या कोई तरीका है जब मैं जांच सकता हूं कि कोई विशेष अनुभाग लोड होने पर समाप्त हो गया है? एक बार लोड होने के बाद मुझे उस सेक्शन को क्लोन करना होगा और इसे "प्लेसहोथिस" div के ठीक बाद रखना होगा। मैं इसे कैसे प्राप्त कर सकता हूं इस पर कोई सुझाव?

Answer 1

आप पता लगाने के लिए जब नोड्स .k-content से जुड़ जाते हैं, clone उन्हें jQuery का उपयोग कर एक MutationObserver उपयोग कर सकते हैं, और एक .Placeafterthis के बाद उन्हें ppend (demo):

var kContent = $('.k-content'); // the original container in which the items will be placed 
var $Placeafterthis = $('.Placeafterthis'); // the cloned elements target marker placeholder 

function mutationHandler(mutation) { // the mutation handler will deal with the addition of new nodes to the original container 
    var addedNodes = mutation.addedNodes; 

    if (!addedNodes.length) { // if no added nodes return 
     return; 
    } 

    $.each(addedNodes, function() { // iterate the add nodes 
     var $element = $(this); 

     if (!$element.hasClass('rbs-section')) { // if the node doesn't have the right class continue to the next one 
      return true; 
     } 

     var $prevSections = $Placeafterthis.find('~ .rbs-section'); // find if there are already sections append to the target 
     var $target = $prevSections.length === 0 ? $Placeafterthis : $prevSections.last(); // if there are sections take the last, if not use the marker 

     /** note that using .clone(true) will also clone all jQuery event handlers and data from the original element. If you don't need this behavior, just use .clone() **/ 

     $target.after($element.clone(true)); // append after the target 
    }); 
} 

var observer = new MutationObserver(function (mutations) { // create a new mutation observer 
    mutations.forEach(mutationHandler); 
}); 

var config = { // config should include only childList because we just want added nodes 
    childList: true 
}; 

observer.observe(kContent.get(0), config); // watch the original container with the observer 

Answer 2

मुझे here से क्लोनिंग कोड मिला और आवश्यकतानुसार संशोधित किया गया। पिछले script टैग पर async का उपयोग करना हमेशा मेरे लिए काम करता है, लेकिन बाहरी स्क्रिप्ट पर इसका उपयोग करें, मैंने इसे प्रदर्शन उद्देश्यों के लिए अभी भी इनलाइन किया है। सबसे महत्वपूर्ण बात यह है कि स्क्रिप्ट अवरुद्ध करने से बचने के लिए क्लोजिंग बॉडी टैग पर है। DOMContentLoaded ईवेंट पर एक ईवेंट श्रोता संलग्न किया गया है, वह तब होता है जब अनुभाग तैयार होना चाहिए (जब तक खंडों में iframes नहीं है ...)। मैंने आसानी से देखने के लिए सभी तत्वों की सीमाओं को रंग दिया।

अद्यतन: अतिथि 271314 की पोस्ट पढ़ने के बाद, यह मुझे याद दिलाता है कि मैंने क्लोन की आईडी पर विचार करने की उपेक्षा की है। क्लोन के रूप में वे समान आईडी भी रखते थे, इसलिए मैंने इसे थोड़ा सा दोहराया और स्टार वार्स का थोड़ा सा जोड़ा।

section[id^="id"] { 
 
    border: 3px solid silver; 
 
    width: 200px; 
 
    height: 25px; 
 
} 
 
section[id^="st"] { 
 
    border: 3px solid black; 
 
    width: 200px; 
 
    height: 25px; 
 
} 
 
.kamino-content { 
 
    border: 3px dashed blue; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.Placeafterthis { 
 
    border: 3px dotted orange; 
 
    width: 200px; 
 
    height: 75px; 
 
}

<div class="Placeafterthis"> 
 
    Place After This 
 
</div> 
 

 
<div class="kamino-content"> 
 
    <section class="fett-dna" id="id1" name="jango"> 
 
    .. // section content 
 
    </section> 
 
    <section class="fett-dna" id="id2" name="jango"> 
 
    .. // section content 
 
    </section> 
 
    <section class="fett-dna" id="id3" name="jango"> 
 
    .. // section content 
 
    </section> 
 
    Kamino-Content 
 
</div> 
 

 

 

 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> 
 

 
<!-- You should really do this: <script async src="external.js"></script> --> 
 

 
<script async> 
 
    document.addEventListener("DOMContentLoaded", cloneLab, false); 
 

 
    function cloneLab() { 
 
    var vat = $('.kamino-content'), 
 
     squad = $('.fett-dna').size(), 
 
     fett = vat.find('.fett-dna'); 
 
    fett.each(function(idx, val) { 
 
     var trooper = $(this).clone(); 
 
     trooper.attr("id", "st" + (squad + idx)).attr("name", "stormtrooper"); 
 
     trooper.insertAfter('.Placeafterthis'); 
 
    }); 
 
    } 
 
</script>

Answer 3

$.get() उपयोग का प्रयास करें, .k-content के जवाब जोड़कर, क्लोन करने के लिए, id के चरित्र को जोड़ने DOM में डुप्लिकेट id के रोकने के लिए, .Placeafterthis के बाद सम्मिलित प्रतिक्रिया में चयनित section तत्व की id छानने; this के रूप में jQuery वादा वस्तु के साथ getSections सेट को परिभाषित, रिकर्सिवली getSections फोन sections सरणी पर Array.prototype.shift() वापस जाने के लिए आदेश में सूचकांक 0 में प्रत्येक आइटम के लिए $.get() वापस जाने के लिए, और अगर falsesection[0] वापसी this.promise()

// `id`s of `section` elements to append to `.k-content` 
    var sections = ["#id1", "#id2", "#id3"]; 
    // selected `id` to do stuff with 
    var selected = sections[1]; 
    // container 
    var container = $(".k-content"); 
    // `complete` handler for `$.get()` requests 
    function selectedId(html, textStatus, jqxhr) { 
     // decode `data` : `id` sent with request 
     var id = decodeURIComponent(this.url.split("?")[1]).split("=")[1]; 
     // append `section` to `container` 
     container.append($(html).filter(id)); 
     // if `selected` appended to `container` , 
     // and `selected` is not in `DOM` directly after `.Placeafterthis` element 
     // clone `selected` , append after `.Placeafterthis` element 
     if (container.find(selected).is("*") 
      && !$(".Placeafterthis + " + selected + "-a").is("*")) { 
      var clone = $(selected, container).clone() 
         .attr("id", selected.slice(1) + "-a"); 
      $(".Placeafterthis").after(clone) 
     } 
    } 

    var getSections = function getSections() { 
     var p = sections.shift(); 
     return !!sections 
       && $.get("http://fiddle.jshell.net/guest271314/rvt8evoy/show/" 
       , {"id": p}, selectedId).then(getSections) 
    }; 

    getSections() 
    .then(function() { 
     console.log("complete") 
    }) 

jsfiddle पर !! ऑपरेटर द्वारा लौटाए गए http://jsfiddle.net/1d6vmdpt/5/

Answer 4

आप पिछले अनुभाग के बाद अपनी स्क्रिप्ट स्थापित करेंगे, तो:

<section class="rbs-section" id="id3" name=""> 
.. // section content 
</section> 

<script> 
    (function() { 
    var s3 = document.getElementById("id3"); 
    ... 
    })(); 
</script> 

तो यह वास्तव में उस तत्व के बाद लागू किया जाएगा और अपने पूर्ववर्तियों डोम में दिखाई देगा ।