JQuery загрузить определенный контент #Div из нескольких файлов HTML

Question

Я пытаюсь сделать слайдер контента для своего сайта. У меня есть несколько файлов HTML, и структура этих файлов выглядит следующим образом:

<div id="title"><h2>Title of the Slide</h2></div>
<div id="image"><a href="http://mylink.com"><img src="image.jpg" width="600" height="300" alt="image"</a></div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>

Я пытался использовать следующий скрипт для получения контента (но безуспешно) :

<?php
function render($position="") {
    ob_start();
    foreach(glob("/slides/*.html") as $fileName) {
    $fname = basename( $fileName );
    $curArr = file($fname);
    $slides[$fname ]['title'] = $curArr[0];
    $slides[$fname ]['image'] = $curArr[1];
    $slides[$fname ]['content'] = $curArr[2];

    foreach($slides as $key => $value){

        ?>
          <div id="slide-title">
            <?php echo $value['title'] ?>
          </div>

          <div id="slide-content">
              <?php echo $value['content'] ?>
          </div>

          <div id="slide-image">
              <?php echo $value['image'] ?>
          </div>

        <?php
        }}
        ?>
    <?php
    return ob_get_clean();
}

Но потом я узнал о функции jQuery .... (опять безуспешно)

    jQuery.noConflict();
      (function($){
        $(document).ready(function () {    
          $('#slide-title').load('slides/slide1.html #title');
          $('#slide-content').load('slides/slide1.html #content');
          $('#slide-image').load('slides/slide1.html #image');
      });   
    })(jQuery);

Теперь мои вопросы .....

1. Использую ли я правильный синтаксис.

2. Как получить содержимое из нескольких файлов с помощью jQuery.

Обратите внимание: Мои знания по программированию почти «0». Я только начал изучать это.

Answer 1

$('#slide-title').load('slides/slide1.html #title');
$('#slide-content').load('slides/slide1.html #content');
$('#slide-title').load('slides/slide1.html #image');

Это будет работать, но не очень быстро.Вы делаете три отдельных запроса на одну и ту же страницу.Вы можете легко объединить их в один, используя $.get и его аргумент обратного вызова:

$.get('slides/slide1.html', function(html) {
    var $html = $(html);

    $('#slide-title').html($html.find('#title'));
    $('#slide-content').html($html.find('#content'));
    $('#slide-image').html($html.find('#image'));
});

Обратите внимание, что я исправил slide-title до slide-image в последней строке,я думаю, это то, что тебе нужно.

Answer 2

Jquery не обладает интуитивным знанием файлов в удаленной файловой системе. Вы могли бы, однако, сделать что-то вроде этого:

$(document).ready(function () {    
      for(var i = 1; i < 5; i++) {
        $('body').append('<div id="slide-content-'+i+'"></div>');
        $('#slide-title-'+i).load('slides/slide'+i+'.html #title');
        // ...and so on
      }
});

Это сделает что-то похожее на то, что вы пытались сделать с PHP. Я не очень хорошо знаю PHP, но это может быть лучшим способом (в зависимости от его способностей обработки DOM), так как выше будет создавать один запрос для каждого файла.

Answer 3

Ваш код jquery кажется правильным. Какой выход вы получаете?

Вот указатель на то, что вы пытаетесь достичь ..

http://www.electrictoolbox.com/load-content-jquery-ajax-select-element/

Дайте мне знать, помогает ли это ....