Question

我已将数据表加载到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?
}

Answer 1

您可以使用.objColor对$.each元素进行迭代，并在siblings中查找.objSize元素：

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

Answer 2

首次加载页面时，您可以对表执行一次迭代，并将数据移动到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 });

好消息是，你存储了一个双引用。因此，如果您可以从click事件中获取它，则可以从DOM节点访问它：

$('.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.

Answer 3

我建议始终将table / tr / td用于表格数据，因为它在标记中提供表格语义，可以通过标记名称而不是类名来编写脚本（可能更快更方便）。要命名每行的cols，我将jQuery用于$（'tr'）。each（function（）{/ *将类名称分配给TDs * /}）;
（假设table / tr / td，..）尝试$（'td.objColor：contains（blue）'）。siblings（'。objSize'）。text（）;

使用jQuery查询“in page”表

3 个答案: