Question

我一直在尝试将此对象转换为无序列表，但我需要将其合并到类别中。

var snippets = [
  {title: 'snippet 1', content: 'hello there 1', category: 'javascript'},
  {title: 'snippet 2 ', content: 'hello there 2', category: 'wordpress'},
  {title: 'snippet 3', content: 'hello there 3', category: 'javascript'},
  {title: 'snippet 4', content: 'hello there 4', category: 'general'},
  {title: 'snippet 5', content: 'hello there 5', category: 'general'}
];

预期输出为：

<ul>
  <li>javascript 
    <ul>
      <li>snippet 1</li>
      <li>snippet 2</li>
    </ul>
  </li>
    <li>wordpress 
    <ul>
      <li>snippet 1</li>
      <li>snippet 2</li>
    </ul>
  </li>
</ul>

我一直试图用$.each来做，但对于我的文件，我无法理解它。我也愿意使用UnderscoreJS。

$('body').append('<ul class="categories"></ul>');

$.each(snippets, function(i, v) {
    var data = '<li class="category">'+ v.category +' ';
      data += '<ul class="item"> <li> ' + v.title + ' </li> </ul>';
      data += '</li>';

    $(data).appendTo('.categories');
});

不期望输出：

<ul class="categories">
  <li class="category">javascript 
    <ul class="item"> 
      <li> snippet 1 </li> 
    </ul></li>
  <li class="category">wordpress 
    <ul class="item"> 
      <li> snippet 2  </li> 
    </ul>
  </li>
  <li class="category">javascript 
    <ul class="item"> 
      <li> snippet 3 </li> 
    </ul>
  </li>
  <li class="category">general 
    <ul class="item"> 
      <li> snippet 4 
      </li> 
    </ul>
  </li>
  <li class="category">general 
    <ul class="item"> 
      <li> snippet 5 
      </li> 
    </ul>
  </li>
</ul>

任何人都可以给我一个提示吗？

Answer 1

内联注释说明：

var snippets = [
  {title: 'snippet 1', content: 'hello there 1', category: 'javascript'},
  {title: 'snippet 2 ', content: 'hello there 2', category: 'wordpress'},
  {title: 'snippet 3', content: 'hello there 3', category: 'javascript'},
  {title: 'snippet 4', content: 'hello there 4', category: 'general'},
  {title: 'snippet 5', content: 'hello there 5', category: 'general'}
];

// Create the UL that will contain all the categories
var ul = $("<ul>").addClass("categories");
// Use an object as a map of category to sublist
var lists = Object.create(null);
// Loop through the snippets
snippets.forEach(function(snippet) {
  // Get the sublist for this category
  var list = lists[snippet.category];
  if (!list) {
    // Don't have one yet, create it
    list = lists[snippet.category] = $("<ul>");
    // Create the item that will contain it in the main list
    var item = $("<li>").addClass("category").text(snippet.category);
    // Add the sublist to the item, and the item to the main list
    item.append(list);
    ul.append(item);
  }
  // Add this entry to the sublist
  list.append($("<li>").addClass("item").text(snippet.title));
});
// Done building, add the main list to the doc
ul.appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

另一种方法：

＆＃13;

var snippets = [
  {title: 'snippet 1', content: 'hello there 1', category: 'javascript'},
  {title: 'snippet 2 ', content: 'hello there 2', category: 'wordpress'},
  {title: 'snippet 3', content: 'hello there 3', category: 'javascript'},
  {title: 'snippet 4', content: 'hello there 4', category: 'general'},
  {title: 'snippet 5', content: 'hello there 5', category: 'general'}
];

var categories = _.uniq(_.pluck(snippets, 'category'));

var categoriesUl = '<ul>';
categories.forEach(function(category) {
  categoriesUl += '<li>' + category + '</category>';
  var listUnderCategory = [];
  snippets.forEach(function(item) {
    if (item.category == category) {
      listUnderCategory.push(item.title);
    }
  });
  if (listUnderCategory.length) {
    categoriesUl += '<ul>';
    categoriesUl += listUnderCategory.map(function(val) {
      return '<li>' + val + '</li>'
    }).join('');
    categoriesUl += '</ul>';
  }
})
categoriesUl += '</ul>';

$('#output').append(categoriesUl);

＆＃13;

<div id='output'>
</div>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

您可以使用所需的值创建一个额外的对象，如下所示。现在，每个类别都将在单独的数组中，类别为键。

setDT(mydf)
mydf1 <- copy(mydf)
lst1 <- vector("list", 3)
for(i in 1:3){
  tmp <- mydf[, .(Site = sample(unique(Site), 1)), Region]
  lst1[[i]] <-  mydf[tmp, on = .(Region, Site)]
   mydf <- mydf[mydf[tmp, Site != i.Site, on = .(Region)]]
 } 

lst1
#[[1]]
#   V1 V2 Region Site Year
#1:  5  6      A   X2 2000
#2:  2  2      A   X2 2001
#3:  3  3      B   X1 2000
#4:  2  3      B   X1 2001
#5:  4  5      C   X2 2000
#6:  6  7      C   X2 2001

#[[2]]
#   V1 V2 Region Site Year
#1:  5  1      A   X1 2000
#2:  1  1      A   X1 2001
#3:  7  8      B   X3 2000
#4:  1  2      C   X1 2000
#5:  9  4      C   X1 2001

#[[3]]
#   V1 V2 Region Site Year
#1:  8  9      A   X3 2000
#2:  5  5      A   X3 2001
#3:  3  1      B   X2 2000
#4:  4  4      B   X2 2001

js fiddle

使用jQuery嵌套无序列表的对象

3 个答案: