Добавить некоторые элементы в div, а остальные - в другой div в jQuery

0

Я пишу скрипт для анализа файла JSON, и, похоже, я попал в сложную ситуацию. Можно ли добавить половину возвращаемых элементов в один элемент div, а другая половина - в другой div elemet?

Вот оригинальная разметка:

<div class="feed"><div class="displayfeed main"></div></div>
<div class="feed"><div class="displayfeed second"></div></div>

Я хочу, чтобы страница отображалась следующим образом после добавления возвращаемых данных:

<div class="feed">
    <div class="displayfeed main">
        <h3>item1 title</h3>  //Half of the items in "div.main"
        .......
    </div>
</div>

<div class="feed">
    <div class="displayfeed second">
     <h3>item2 title</h3> //Half of the items in "div.second"
     ...........
    </div>
</div>

Код JS:

$.ajax({
   url: source,
   success: function (data) {
     var item_html = 
        $(data.items).each(function (index, item) {
          '<h3>'+item.title+'</h3>';
        });
      //Any way to append some of them in ('.main') and the rest in ('.second')?
     $('.displayfeed').append(item_html); 
   },
   error: function () {$searcharea.append("<b>No Results Returned</b>");}        
 });

Я ищу любые возможные предложения, иначе у меня нет выбора, кроме как разобрать один и тот же канал дважды. Любая помощь будет оценена по достоинству.

Обновлено: я установил FIDDLE, используя ленту новостей Gogole в формате JSON, преобразованную YQL в качестве примера

  • 0
    Вместо того, чтобы делать это для каждого элемента - вы можете получить длину, разделить на 2, перебрать половину элементов и добавить их к любому необходимому элементу div ...
Теги:

3 ответа

2
Лучший ответ

Используйте многократный селектор.

$.ajax({
   url: source,
   success: function (data) {
      var item_html_main = "";
      var item_html_second = "";
      // assign values to item_html_main and item_html_second variables
      $('.displayfeed.main').append(item_html_main); 
      $('.displayfeed.second').append(item_html_second); 
   },
   error: function () {$searcharea.append("<b>No Results Returned</b>");}        
 });

Я не знаю, какая у вас структура, но вы можете попробовать это:

$.ajax({
    url: source,
    success: function (data) {
        var item_html_main = "";
        var item_html_second = "";
        // assign values to item_html_main and item_html_second variables
        var count = data.count;
        var half = count/2;
        var counter = 0;
        for(item in data) {
            if(counter < half) {
                item_html_main += item;
            } else {
                item_html_secodn += item;
            }
            counter++;
        }
        $('.displayfeed.main').append(item_html_main); 
        $('.displayfeed.second').append(item_html_second); 
    },
    error: function () {$searcharea.append("<b>No Results Returned</b>");}        
});
Поделиться
  • 0
    Мне нужно использовать $(data.items).each(function (index, item) для каждого селектора, верно?
  • 0
    @ user35295 Я обновил вопрос, но не знаю, как на это ответить. Я просто предложил какой-то метод.
Показать ещё 8 комментариев
2

Вы можете попробовать что-то вроде этого. если неважно, какие сообщения отображаются в контейнере

$.ajax({
    url: "<your-URL>",
    success: function (data) {
        var length = 0;
        var items = data.query.results.item;
        items = items.map(function(item){
            return '<h3>'+item.title+'</h3>';
        });
        var half = items.length/2;
        for(var i = 0; i < items.length; i++)
            if(i < half)
                $('.main').append(items[i]);
            else
                $('.second').append(items[i]); 
            length++;
        },

    error: function () {$searcharea.append("<b>No Results Returned</b>");}        
});
Поделиться
  • 0
    Да, не имеет значения, какой элемент отображается в каком div. Я просто хочу, чтобы некоторые в одном div, а остальные в другом.
  • 0
    чем это должно работать для вас. если item_html - это просто Объект с созданными в нем заголовками, это должно сделать это в целом.
Показать ещё 5 комментариев
1

Конечно, но вам нужен какой-то разделитель или что-то еще

Вы можете добавить все в свой первый div и затем скопировать часть, которую вы хотите во втором div, из первой.

пример

item_html

<h2>Headline</h2>
<span>
News Text 
</span>

JS

$('.displayfeed').append(item_html); 
sec = $('.displayfeed').find('span').html();
$('.displayfeed').find('span').remove();
$('.displayfeed second').append(sec);
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню