查询的“页面”表格与jQuery

我已加载数据的表到HTML页面，以便它看起来像这样：查询的“页面”表格与jQuery

<div id="objList" style="display:none"> 
    <div class="objRecord"> 
     <div class="objID">6846</div> 
     <div class="objColor">blue</div> 
     <div class="objSize">500</div> 
     <div class="objType">Q</div> 
    </div> 
    ... 
    <div class="objRecord"> 
     <div class="objID">6877</div> 
     <div class="objColor">green</div> 
     <div class="objSize">600</div> 
     <div class="objType">T</div> 
    </div> 
</div>

，我已经做到了这种方式的原因是因为它是相对较少的数据量，我不希望页面“喋喋不休”，并返回服务器（ajax）获取每个事件的新数据。

我将根据页面上的用户事件查询该数据表。

我的问题：
1.使用jQuery检索记录的结构有什么问题吗？你会怎么做？我在想，我也可以使用表格+ tr + td结构作为数据，但是看不到优势 - 但是...
2.例如，我将如何获取所有蓝色的大小jQuery表中的对象？

我可以用得到表中的所有蓝色记录：

var myobjects = $('.objRecord .objColor:contains("blue")').parent();

但我现在努力获得的大小值的是阵列的......

for (var i = 0; i < myobjects.length; i++) { 
    var x = myobjects[i]; // somehow get the size out of this? 
}

来源

2010-01-20 Guy

你可以做一个迭代在桌子上时，第一次加载页面，并且将数据移动到JavaScript对象常量数组：

$(document).ready(function(){ 
    var data = []; 
    $('#objList .objRecord').each(function(){ 
    var $this = $(this), 
     record = { 
      ref: $this, 
      objID: Number($this.find('.objID').text()), 
      objColor: $this.find('.objColor').text(), 
      objSize: Number($this.find('.objSize').text()), 
      objType: $this.find('.objType').text() 
     }; 

    data.push(record); 
    $this.data('record', record); 
    }); 
});

这发生一次;现在后续查询将针对更快的JavaScript数组执行，而不是针对DOM树执行。

要得到所有大小的数组：

var sizes = $.map(data, function(d){ return d.objSize });

的好处是，你存储的双重参考。所以，你可以从DOM节点访问的情况下，你可能会从一个click事件得到它：

$('.objSize').click(function(){ 
    // Find the parent `.objRecord` then call its data function 
    var record = $(this).closest('.objRecord').data('record'); 

    alert(record.objType); 
})

它可以从JavaScript对象被retreived：

var record = data[0]; // first record 
record.ref.hide(); // Hides the `.objRecord` associated with this record.

来源

2010-01-20 08:20:27

可以遍历在你.objColor元素与$.each，并在查找.objSize元素及其siblings：

$('#objList .objColor:contains("blue")').each(function() { 
    var size = $(this).siblings('.objSize').text(); // 500 
});

来源

2010-01-20 07:31:13 CMS

我d建议在表格数据中始终使用table/tr/td，因为它在标记中提供了表格语义，可以在标记名称而不是类名称的脚本中使用它（可能更快，更方便）。每行命名cols我会使用jQuery到$（'tr'）。each（function（）{/ *在这里为TD分配类名* /}）; （假设table/tr/td，..）try $（'td.objColor：contains（blue）'）。siblings（'。objSize'）。text（）;

来源

2010-01-20 17:32:33

查询的“页面”表格与jQuery

回答

相关问题