Question

有人可以告诉我为什么这段代码在chorme上正常工作但在其他浏览器上却没有？

  $("#"+grid+" tr:nth-of-type(2) td.table_view_tablet").each(function() {
       id = $(this).attr('aria-describedby');
       id = id.split("_");
       jQuery("#"+grid).jqGrid('hideCol', [""+id[2]+""]);
  });

我想在表格“grid”的第二行选择所有类别为“table_view_tablet”的ceil

我的HTML代码与此类似：

    <table id="mailing_grid" aria-labelledby="gbox_mailing_grid" aria-multiselectable="false" border="0" cellpadding="0" cellspacing="0" class="ui-jqgrid-btable" role="grid" style="width: 1039px;" tabindex="0">
      <tr class="jqgfirstrow" role="row" style="height: auto">
            <td role="gridcell" style="height: 0px; width: 47px;"></td>
            <td role="gridcell" style="height: 0px; width: 47px;"></td>
            <td role="gridcell" style="height: 0px; width: 78px;"></td>
            <td role="gridcell" style="height: 0px; width: 116px;"></td>
            <td role="gridcell" style="height: 0px; width: 116px;"></td>
            <td role="gridcell" style="height: 0px; width: 78px;"></td>
            <td role="gridcell" style="height: 0px; width: 116px;"></td>
            <td role="gridcell" style="height: 0px; width: 31px;"></td>
      </tr>
      <tr id="1" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" role="row" tabindex="0">
            <td aria-describedby="mailing_grid_CSCDML" class="table_view_mobile" role="gridcell" style="text-align: left;">1</td>
            <td aria-describedby="mailing_grid_CSCDCS" class="table_view_mobile" role="gridcell" style="text-align: left;">2</td>
            <td aria-describedby="mailing_grid_CSNMCS" class="table_view_mobile" role="gridcell" style="text-align: left;">3</td>
            <td aria-describedby="mailing_grid_CSDSCS" class="table_view_mobile" role="gridcell" style="text-align: left;">4</td>
            <td aria-describedby="mailing_grid_CSADR" class="table_view_desktop" role="gridcell" style="text-align: left;">5</td>
            <td aria-describedby="mailing_grid_CSCDZP" class="table_view_desktop" role="gridcell" style="text-align: left;">6</td>
            <td aria-describedby="mailing_grid_CSCITY" class="table_view_mobile" role="gridcell" style="text-align: left;">7</td>
            <td aria-describedby="mailing_grid_CSCDCY" class="table_view_mobile" role="gridcell" style="text-align: left;">8</td>
      </tr>
    </table>

Answer 1

也许是jQuery驱动而不是CSS驱动的东西，所以你不需要依赖CSS属性/选择器的浏览器支持：

var $grid = $('#' + grid);

$grid
    .find('tr')
    .eq(2)
    .find('td.table_view_tablet')
    .each(function(){
        var $self = $(this);

        $grid.jqGrid('hideCol',[
            $self.attr('aria-describedby').split('_')[2]
        ]);
    });

如果没有你的HTML或jsFiddle，我无法确认这是否按预期工作，但它与之前以较少CSS驱动的方式实现的代码的目标相同。这也有利用缓存的好处，因此它可能更快。也就是说，潜在的改进，假设jqGrid正如我所假设的那样起作用：

var $grid = $('#' + grid),
    hideColArr = [];

$grid
    .find('tr')
    .eq(2)
    .find('td.table_view_tablet')
    .each(function(){
        hideColArr[hideColArr.length] = $(this).attr('aria-describedby').split('_')[2];
    });

$grid.jqGrid('hideCol',hideColArr);

这样您就不会多次调用jqGrid。再次，在这里做出假设，但考虑到你传递一个数组，这应该可以按你的意愿工作，而不需要执行不必要的调用。

Jquery，用类选择所有元素

1 个答案: