Добавить разные номера для контента

Question

Итак, я хочу получить информацию о 6000 профилях, и каждый из них имеет ссылки на свой номер с определенным номером в порядке от 1 до 6000. Я хочу получить конкретное изображение из каждого из своих профилей на одной странице. Вот код, чтобы получить его для профиля пользователя 1. Там, где говорится, что u1 нужно заменить 1 на каждый из разных чисел.

<span id="boutiqueimage"></span> 
<script>$('#boutiqueimage').load('/u1 #field_id14 dd') 
             </script> 

Answer 1

На первый взгляд кажется простой цикл будет делать трюк, но проблема не обязательно выборка изображения, но что с ними делать, когда вы получить их. Для этого вы не хотите использовать .load(), потому что он находится за пределами вашего прецедента. (Предполагается, что вы хотите установить сгружено содержание к элементу, но вы хотите добавить извлечённого содержания к элементу.)

Чтобы сделать это, нам нужно выполнить почти такую ​​же функциональность как .load(), так что давайте см. how it does its thing. Похоже, это просто стандартный вызов .ajax() с этим, как его обработчик успеха:

self.html(selector ? 
      jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) : 
      responseText); 

Кажется достаточно просто. И мы можем упростить это немного больше, так как мы знаем, у нас есть selector значение:

self.html(jQuery('<div>').append(jQuery.parseHTML(responseText)).find(selector)); 

Теперь вместо вызова .html() на self, мы называем append() на нашем целевом элементе:

$('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find(selector)); 

Мы также необходимо явно определить selector:

$('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd')); 

Теперь мы можем обернуть, что в вызове AJAX:

jQuery.ajax({ 
    url: '/u1', 
    type: 'GET', 
    dataType: 'html' 
}).done(function(responseText) { 
    $('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd')); 
}); 

Это должно повторить функциональность .load() для наших нужд. Теперь мы можем положить его в цикле:

for (var i = 1; i <= 6000; i++) { 
    jQuery.ajax({ 
     url: '/u' + i, 
     type: 'GET', 
     dataType: 'html' 
    }).done(function(responseText) { 
     $('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd')); 
    }); 
} 

Этот должен сделать 6000 AJAX запросов, где url каждого из них другое значение i из цикла. Имейте в виду, что есть no гарантируют, что ответы будут поступать в том же порядке, в котором они были запрошены. Так что очень маловероятно, что результирующие изображения будут отсортированы с 1-6000.

Редактировать: В ответ на комментарии возможно выполнение запросов в последовательном порядке, а не в параллельном. Давайте инкапсулируем операцию в функцию и вызовите ее из своего собственного обработчика. Возможно, что-то вроде этого:

function fetchImage(id) { 
    jQuery.ajax({ 
     url: '/u' + id, 
     type: 'GET', 
     dataType: 'html' 
    }).done(function(responseText) { 
     $('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd')); 
     if (id < 6000) { 
      fetchImage(id + 1); 
     } 
    }); 
} 
fetchImage(1); 

Это будет загружать их намного медленнее, поскольку это только по одному. Но я предполагаю, что 6000 одновременных запросов не были хорошей идеей в первую очередь :) Это также будет загружать их последовательно, что является бонусом.

Answer 2

Предполагая, что вы опубликовали код для профиля 1, а профили пронумерованы от 1 до 6000, и вы не хотите пейджинга, а затем попробуйте это. ПРИМЕЧАНИЕ. Доступ к фрагменту приводит к загрузке всей страницы! Лучшим решением является создание серверного процесса, который возвращает только необходимый html.

var max = 6000,cnt=1; 
function loadNext() { 
    $("#container").append('<span id="boutiqueimage'+cnt+'"></span>'); // add a span 
    $('#boutiqueimage'+cnt).load('/u'+cnt+' #field_id14 dd', 
    function (responseText, textStatus, req) { // if error 
     if (textStatus == "error") { 
     $('#boutiqueimage'+cnt).html("image "+cnt+" not found"); 
     } 
     else { 
     if (cnt<max) { 
      cnt++; 
      loadNext(); 
     } 
     } 
    }); 
} 

$(function() { 
    loadNext(); //start 
}); 

использованием

<div id="container"></div>