访问第二个嵌套div的表元素的height属性

时间:2014-12-01 23:06:26

标签: jquery html

我已经发布了我的网页的完整正文。我需要使用id productgrid2访问父div的第二个div中的元素。这将是下面代码中第二个高度为219.3999的div。具体来说,我需要第二个div的表的高度。这将是具有类k-selectable的表。问题是这些元素是动态生成的,我需要通过jQuery访问它们。环顾四周但没有任何东西符合我独特的情况。有人可以帮忙吗?

<div id="productgrid2" style="border: 1px solid rgb(54, 57, 64); box-shadow: rgb(136, 136, 136) 7px 7px 5px; margin-bottom: 15px; height: 250px;" data-role="grid" class="k-grid k-widget">
        <div class="k-grid-header" style="padding-right: 14px;">
            <div class="k-grid-header-wrap" data-role="resizable">
                <table role="grid">
                    <colgroup>
                        <col style="width:170px">
                        <col style="width:135px">
                        <col style="width:120px">
                        <col style="width:75px">
                        <col style="width:55px">
                        <col style="width:60px">
                        <col style="width:190px">
                    </colgroup>
                    <thead role="rowgroup">
                        <tr role="row">
                            <th role="columnheader" data-field="rfi_name" data-title="RFI/Click2Connect" class="k-header" data-role="columnsorter"><a class="k-link" href="#">RFI/Click2Connect</a></th>
                            <th role="columnheader" data-field="SelectedOptions" data-title="Fulfillment" class="k-header k-with-icon k-filterable" data-role="columnsorter"><a class="k-grid-filter" href="#" tabindex="-1"><span class="k-icon k-filter" data-original-title="" title=""></span></a><a class="k-link" href="#">Fulfillment</a></th>
                            <th role="columnheader" data-field="InteractiveID" data-title="Interactive ID" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Interactive ID</a></th>
                            <th role="columnheader" data-field="ISCI" data-title="ISCI" class="k-header" data-role="columnsorter"><a class="k-link" href="#">ISCI</a></th>
                            <th role="columnheader" data-field="IsAddressable" data-title="Addressable" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Addressable</a></th>
                            <th role="columnheader" data-field="Status" data-title="Status" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Status</a></th>
                            <th class="k-header">View, Duplicate or Delete</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="k-grid-content" style="height: 219.399999976158px;">
            <table role="grid" data-role="selectable" class="k-selectable" style="height: auto;">
                <colgroup>
                    <col style="width:170px">
                    <col style="width:135px">
                    <col style="width:120px">
                    <col style="width:75px">
                    <col style="width:55px">
                    <col style="width:60px">
                    <col style="width:190px">
                </colgroup>
                <tbody role="rowgroup">
                    <tr data-uid="c2f68916-0f9e-4a54-a5a2-c95f2de2afe7" role="row">
                        <td role="gridcell">Hunhhh?</td>
                        <td role="gridcell">Mail</td>
                        <td role="gridcell">000000ET00025868</td>
                        <td role="gridcell">654654</td>
                        <td role="gridcell">Yes</td>
                        <td role="gridcell">Draft</td>
                        <td role="gridcell"><a class="k-button k-button-icontext k-grid-Edit" href="#"><span class=" k-icon k-i-search ob-icon-only"></span></a><a class="k-button k-button-icontext k-grid-Duplicate" href="#"><span class=" k-icon k-i-restore ob-icon-only"></span></a><a class="k-button k-button-icontext k-grid-Delete" href="#"><span class=" k-icon k-i-close ob-icon-only"></span></a></td>
                    </tr>
                    <tr class="k-alt" data-uid="5749733a-f164-4557-b6b1-d45c7bb74d60" role="row">
                        <td role="gridcell">Test RFI 1</td>
                        <td role="gridcell">Mail</td>
                        <td role="gridcell">000000ET00025867</td>
                        <td role="gridcell">232654</td>
                        <td role="gridcell">No</td>
                        <td role="gridcell">Draft</td>
                        <td role="gridcell">
                            <a class="k-button k-button-icontext k-grid-Edit" href="#">
                                <span class=" k-icon k-i-search ob-icon-only"></span>
                            </a>
                            <a class="k-button k-button-icontext k-grid-Duplicate" href="#">
                                <span class=" k-icon k-i-restore ob-icon-only"></span>
                            </a>
                            <a class="k-button k-button-icontext k-grid-Delete" href="#">
                                <span class=" k-icon k-i-close ob-icon-only"></span>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

2 个答案:

答案 0 :(得分:1)

你是说你无法访问高度,因为当你运行这个功能时元素还没有存在?如果是这样,你可以试试这个。它是一个jQuery函数,它等待一个元素存在,然后运行你想要的任何函数。我很久以前就从其他一些SO问题中得到了它,但我不记得在哪里或我会提到这个问题。

$.fn.waitUntilExists = function(handler, shouldRunHandlerOnce, isChild) {
  var $elements, $this, found;
  found = "found";
  $this = $(this.selector);
  $elements = $this.not(function() {
    return $(this).data(found);
  }).each(handler).data(found, true);
  if (!isChild) {
    (window.waitUntilExists_Intervals = window.waitUntilExists_Intervals || {})[this.selector] = window.setInterval(function() {
      $this.waitUntilExists(handler, shouldRunHandlerOnce, true);
    }, 500);
  } else {
    if (shouldRunHandlerOnce && $elements.length) {
      window.clearInterval(window.waitUntilExists_Intervals[this.selector]);
    }
  }
  return $this;
};

您可以像这样使用它:

$(selector).waitUntilExists(functionToRunOnSelector);

答案 1 :(得分:1)

虽然您无法定义/检索像素的分数,但我认为您想要的是使用第n个子选择器:

$("#productgrid2 div:nth-child(2)").height()

jsfiddle