jquery根据订单号将数据追加到html [英] jquery append data to html according to order number

问题描述

我需要用6 li 的值和它们的值（空或不是）来构建一个列表，然后将它添加到现有的 li 。

从sql查询返回这些结果：

  id_news title category order 
 ------- -------- -------- ----- 
 3 Alex .. 。12 1 
 12415奥巴马... 3 3 
  

有了这些数据，我需要建立按照 order 列表的顺序排列，我的意思是列表应该是这样的：

 < UL> 
< li data-order =1> Alex ...< / li> 
< li data-order =2>此处没有特色新闻，请点击添加< / li> 
< li data-order =3>奥巴马...< / li> 
< li data-order =4>此处没有特色新闻，请点击添加< / li> 
< li data-order =5>此处没有特色新闻，请点击添加< / li> 
< li data-order =6>此处没有特色新闻，请点击添加< / li> 
< / ul> 
  

所以，我的问题是：

• 我应该有一个预定义的列表并在那里添加数据吗？


• 或者，我应该在构建列表时执行此操作吗？如果是这样，怎么做？

我现在拥有的jQuery代码：

  var sublist ='< ul id =order_list> < H3>订单清单：< / h3>'; 
 $ .each（data，function（index，value）{
 sublist + ='< data-target =''+ value ['id_news'] +'>'+ 'headline'] +'< / li>'; 
}）; 
 sublist + ='< / ul>'; 
 list.append（sublist）; 
  

解决方案

重要的是要记住只要获得所有在插入到DOM之前，标记字符串文本就是你想要的方式，这将是99％的优化（不是你不是，只是指出这绝对是关注的焦点）。

至于这样做：使用与创建标记相同的代码，但首先对您的数据数组进行排序。为此，请使用JavaScript数组'排序功能。 这jsfiddle 显示它正在发生。

  var data = [{order：5}，{order：45}，{order：4}，{order：200}]; 
 data.sort（function（a，b）{return a.order-b.order;}）; 
 $ b $ .each（data，function（index，value）{
 document.write（value.order +'< br />'）; 
}）; 
 
 //输出显示按对象的order order val排序的数组
  

我假设你的数据数组拥有一个具有数字顺序属性的对象。当然，如果该属性被命名为别的东西，那么就相应地改变，如果它是一个字符串而不是数字，那么在函数中使用Number（）就可以使数学运行。

I need to build a list with 6 li's and their values (empty or not) and then append it to an existing li.

Having these results in return from an sql query:

id_news  title      category  order
-------  --------   --------  -----
3        Alex...    12        1
12415    Obama...   3         3

With that data I need to build an in order by order list, and by that I mean that the list should be something like:

<ul>
    <li data-order="1"> Alex... </li>
    <li data-order="2"> No featured news here, click to add </li>
    <li data-order="3"> Obama... </li>
    <li data-order="4"> No featured news here, click to add </li>
    <li data-order="5"> No featured news here, click to add </li>
    <li data-order="6"> No featured news here, click to add </li>
</ul>

So, my questions are:

• Should I have a predefined list and add data there?
• Or, should I do it while building the list? If so, how?

The jQuery code that I have by now:

var sublist = '<ul id="order_list"> <h3> Order list: </h3>';
$.each(data, function(index, value) {
  sublist += '<li data-target="'+value['id_news']+'">'+value['headline']+'</li>';
});
sublist += '</ul>';
list.append(sublist);

解决方案

The important thing is to remember to just get all the markup string text the way you want it before inserting into the DOM, that's going to be 99% of the optimization (not that you aren't, just pointing out that that's definitely the focus to keep).

As for accomplishing that: use the same code you have for creating the markup, but sort your "data" array first. Use javascript arrays' "sort" function for that. This jsfiddle shows it happening.

var data = [{order:5}, {order:45}, {order:4}, {order:200}];
data.sort(function(a,b){return a.order-b.order;});

$.each(data,function(index, value){
    document.write(value.order+'<br/>');
});

// output shows the array ordered by the val of the objects' order prop

I'm assuming that your data array holds objects with an order property that is numeric. Of course, if the property is named something else then change accordingly, and if it's a string instead of numeric, then use Number() within the function in order for the math to work.

这篇关于jquery根据订单号将数据追加到html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！