2010-07-08 14 views
6

को प्रतिस्थापित करने के बजाय डेटा जोड़ने के लिए load() की कार्यक्षमता कैसे प्राप्त कर सकता है सिवाय इसके कि मैं प्रतिस्थापित करने के बजाय डेटा जोड़ना चाहता हूं। शायद मैं get() बजाय उपयोग कर सकते हैं, लेकिन मैं सिर्फ लोड डेटाjQuery उपयोग .load()


अद्यतन से #posts तत्व निकालने के लिए

जब मैं एक alert(data) मैं मिलता है ... चाहते

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="jquery.infinitescroll.js"></script> 
    <script> 

    </script> 
</head> 
<body> 
    <div id="info"></div> 
    <div id="posts"> 
    <div class="post"> ... </div> 
    ... 
    <ul id="pageNav" class="clearfix"> 
    <li><a href="page1.html">1</a></li> 
    <li><a href="page2.html">2</a></li> 
    <li><a href="page3.html">3</a></li> 
    <li><a href="page4.html">4</a></li> 
    <li><a href="page5.html">5</a></li> 
    <li><a href="page3.html" class="next">next</a></li> 
    </ul> 

पूरा कोड @pastebin

उत्तर

10

कोई कारण आप तत्व आप $.get() का उपयोग कर करना चाहते हैं अलग नहीं कर सकता है।

$.get('test.html',function(data) { 
    var posts = $(data).find('#posts'); 
     // If the #posts element is at the top level of the data, 
     // you'll need to use .filter() instead. 
     // var posts = $(data).filter('#posts'); 
    $('#container').append(posts); 
}); 

संपादित करें:

आप शायद कोड टिप्पणियों से ऊपर नोटिस नहीं किया था, इसलिए मैं इसे और अधिक यहाँ स्पष्ट करने के लिए जा रहा हूँ।

#posts तत्व data में पदानुक्रम के शीर्ष पर है, दूसरे शब्दों में यदि उसके पास मूल तत्व नहीं है, तो आपको इसके बजाय .filter() का उपयोग करना होगा।

$.get('test.html',function(data) { 
    var posts = $(data).filter('#posts'); 
    $('#container').append(posts); 
}); 

संपादित करें:

नीचे टिप्पणी के आधार पर, आप .filter() बजाय .find() जरूरत लगते हैं।

कारण यह है कि आप एक संपूर्ण HTML संरचना में गुजर रहे हैं। जब आप ऐसा करते हैं, तो jQuery jQuery ऑब्जेक्ट में सरणी के रूप में body टैग के प्रत्यक्ष बच्चों को रखता है।

jQuery की .filter() उस सरणी में केवल नोड्स के विरुद्ध फ़िल्टर करता है। उनके बच्चे नहीं

jQuery की .find() सरणी में नोड्स के वंशज के बीच खोजें।

इस वजह से, आपको दोनों का उपयोग करने की आवश्यकता है। सही वंशज (.next) प्राप्त करने के लिए शीर्ष पर सही (#posts) और .find() पर सही एक प्राप्त करने के लिए .filter()

$(data).filter('#posts').find('.next'); 

यह केवल #posts तत्व को नीचे सेट सीमित कर देता है, तो .next तत्व एक वंशज है कि पाता है।

+0

आप इसे ऑनलाइनलाइनर भी कर सकते हैं: '$ ('# कंटेनर')। ($ ('# पोस्ट', डेटा) संलग्न करें); --- --- यह नहीं कि आपका उदाहरण यह करता है, लेकिन' $ (डेटा) 'कॉल करने से सावधान रहें।/'$ ('# पोस्ट', डेटा) इस कॉलबैक में कई बार! यह संभावित रूप से पूरी तरह से अनियंत्रित प्रसंस्करण/स्मृति हो सकता है ... – gnarf

+1

@gnarf - असल में '$ (" # पोस्ट ", डेटा) .appendTo (" # कंटेनर "); 'कम अपर्याप्त होगा :) –

+0

@ निक: बस पठनीयता की लागत :) – jAndy

0

$ ($), की तरह कुछ:

<div id="result">Hello World </div> 
    <script> 
    $(function() { 
      $(this).load('templates/test2.html', function(result) { 
       $('#result').append(result); 
      }); 
     }); 
    </script> 
+2

यह उस पृष्ठ के साथ 'दस्तावेज़' की सामग्री को प्रतिस्थापित करेगा ... आप वास्तव में ऐसा कुछ नहीं करना चाहते हैं, उसे इस मामले में '.load()' के अलावा कुछ और चाहिए। –

1
$.get("YadaYadaYada.php", function(dat) { 
    $(dat).find("body > #posts").appendTo("#container"); 
}); 
+0

ओह, मुझे अन्य उत्तरों को टिप्पणियां पढ़नी चाहिए थी ... –

2

लोड का उपयोग कर संलग्न करने के लिए:

jQuery('#Posts').append(jQuery('<div>').load(...)); 

यह जोड़ देंगे, जो कुछ भी आप #Posts तत्व में लोड।

संबंधित मुद्दे