Jquery、select 所有带有 class 的元素

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]+""]);
  });

我想 select 在 table "grid"

第二行 class "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，我无法确认它是否按预期工作，但它与你之前在较少 [=21= 中实现的代码相同 objective ] 驱动方式。这也有利用缓存的好处，因此它可能会更快。也就是说，一个潜在的改进，假设 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、select 所有带有 class 的元素

Jquery, select all element with a class

jquery

jqgrid