代码之家 › 专栏 › 技术社区 › Guy

用jquery查询“in page”表

jquery

Guy · 技术社区 · 16 年前

我已经将一个数据表加载到一个HTML页面中,使其看起来像这样:

<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检索记录的结构有什么问题吗?你会怎么做?我在想,我也可以使用一个table+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?
}

3 回复 | 直到 16 年前

Doug Neiner 16 年前

当页面首次加载时,您可以在表上进行一次迭代,并将数据移动到一个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);
   });
});

这种情况会发生一次;现在,后续查询将针对比针对DOM树更快的javascript数组执行。

要获得所有大小的数组:

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对象中检索到:

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

Christian C. Salvadó 16 年前

您可以迭代 .objColor 元素与 $.each 然后寻找 .objSize 其内的元素 siblings :

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

Jon Davis Glenn Block 16 年前

我建议对表格数据始终使用table/tr/td,因为它在标记中提供了表格语义,可以在脚本中使用标记名而不是类名(也许更快更方便)。要为每行的列命名,我将使用jquery to$('tr').each(function()/*assign class name to TDS here*/);
(假定table/tr/td,…)try$('td.objcolor:contains(blue)').siblings('.objsize').text();