使用嵌套子项绕过HTML兄弟

时间:2012-10-31 09:19:18

标签: jquery

我想循环遍历<table>标记下几层的表格。

我认为我能做的就是像

这样的东西
var row = jQuery("#views-form-transport-files-page > table > tbody > tr");
jQuery.each(row, function(index, value){
    console.log(value);
});

在我的浏览器控制台中,它根本不输出任何内容。但是,我尝试输出几个元素,比如更接近父元素的元素。大多数时候,如果我想通过console.log(".my-element-with-children");输出大多数元素,我会得到空方括号,手上有一个物体。

所以我真的很困惑如何定位那些tr并循环它们如果我不能使用这个element > element > element方法?

    <div class="view view-transport-files view-id-transport_files view-display-id-page transport-files-view view-dom-id-03505a184244d1fde35eac370a04bbf4">

      <div class="view-filters">
      <form action="/transport-files" method="get" id="views-exposed-form-transport-files-page" accept-charset="UTF-8"><div><div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
          <div id="edit-field-transp-file-number-value-wrapper" class="views-exposed-widget views-widget-filter-field_transp_file_number_value">
                  <label for="edit-field-transp-file-number-value">
            Transport file number filter          </label>
                        <div class="views-widget">
          <div class="form-item form-type-textfield form-item-field-transp-file-number-value">
 <input type="text" id="edit-field-transp-file-number-value" name="field_transp_file_number_value" value="" size="30" maxlength="128" class="form-text" />
</div>
        </div>
      </div>
                    <div class="views-exposed-widget views-submit-button">
      <input type="submit" id="edit-submit-transport-files" name="" value="Apply" class="form-submit" />    </div>
      </div>
</div>
</div></form>    </div>


      <div class="view-content">
      <div class="views-form"><form action="/transport-files" method="post" id="views-form-transport-files-page" accept-charset="UTF-8"><div><input type="hidden" name="form_build_id" value="form-5qC8G26t49Mw4209HaFKb6GSX4Cnzt3sIsrcUvOobB8" />
<input type="hidden" name="form_token" value="rN22iXS4r0LeXV3rEEaAcVbWi8hOtvG_GyVP6PYICLQ" />
<input type="hidden" name="form_id" value="views_form_transport_files_page" />
<table class="views-table cols-29" >
        <thead>
      <tr>
                  <th class="views-field views-field-field-transp-file-number" >
            <a href="/transport-files?field_transp_file_number_value=&amp;order=field_transp_file_number&amp;sort=asc" title="sort by Transport file number" class="active">Transport file number</a>          </th>
                  <th class="views-field views-field-field-tf-customer" >
            Client          </th>
                  <th class="views-field views-field-field-tf-trailer-nr" >
            Trailer number          </th>

              </tr>
    </thead>
    <tbody>
          <tr class="odd transport-files-row views-row-first">
                  <td class="views-field views-field-field-transp-file-number" >
            <a href="/node/192/edit">43100021</a>          </td>
                  <td class="views-field views-field-field-tf-customer" >
                      </td>
                  <td class="views-field views-field-field-tf-trailer-nr" >
            Trailer 3          </td>
                  <td class="views-field views-field-field-transp-file-load-date" >
            <span class="date-display-single">2012-10-24</span>          </td>
                  <td class="views-field views-field-field-tf-loading-place" >
                      </td>
                  <td class="views-field views-field-field-tf-driver-loading" >
                      </td>
                  <td class="views-field views-field-field-tf-deliv-ferry-comp" >
                      </td>
                  <td class="views-field views-field-field-deliv-ferry-price" >
                      </td>
                  <td class="views-field views-field-field-transp-file-deliv-date" >
            2012-10-24 00:00:00          </td>
                  <td class="views-field views-field-field-tf-delivery-place" >
                      </td>
                  <td class="views-field views-field-field-tf-driver-deliverty" >
                      </td>
                  <td class="views-field views-field-field-tf-invoice-nr" >
            3366554488          </td>
                  <td class="views-field views-field-field-tf-price-amount  views-field-editablefield" >
            <div id="editablefields-field-tf-price-amount" class="editablefield-item"><div class="field-type-number-float field-name-field-tf-price-amount field-widget-number form-wrapper" id="edit-field-tf-price-amount-0-field-tf-price-amount"><div                               id="field-tf-price-amount-0-field-tf-price-amount-add-more-wrapper"><div class="form-item form-type-textfield form-item-field-tf-price-amount-0-field-tf-price-amount-und-0-value">
  <input type="text" id="edit-field-tf-price-amount-0-field-tf-price-amount-und-0-value" name="field_tf_price_amount[0][field_tf_price_amount][und][0][value]" value="5000" size="12" maxlength="10" class="form-text" />
</div>
</div></div><div class="form-actions form-wrapper" id="edit-field-tf-price-amount-0-actions"><input type="submit" id="edit-field-tf-price-amount-0-actions-submit" name="submit-field_tf_price_amount-0" value="Save" class="form-submit" /></div></div>          </td>
                  <td class="views-field views-field-field-transp-file-currency  views-field-editablefield" >
            <div id="editablefields-field-transp-file-currency" class="editablefield-item"><div class="field-type-list-text field-name-field-transp-file-currency field-widget-options-select form-wrapper" id="edit-field-transp-file-currency-0-field-transp-file-currency"><div class="form-item form-type-select form-item-field-transp-file-currency-0-field-transp-file-currency-und">
  <label for="edit-field-transp-file-currency-0-field-transp-file-currency-und"> <span class="form-required" title="This field is required.">*</span></label>
 <select id="edit-field-transp-file-currency-0-field-transp-file-currency-und" name="field_transp_file_currency[0][field_transp_file_currency][und]" class="form-select required"><option value="€ "> €</option><option value="£ " selected="selected"> £</option></select>
</div>
</div><div class="form-actions form-wrapper" id="edit-field-transp-file-currency-0-actions"><input type="submit" id="edit-field-transp-file-currency-0-actions-submit" name="submit-field_transp_file_currency-0" value="Save" class="form-submit" /></div></div>          </td>
                  <td class="views-field views-field-clone-node" >
            <a href="/node/192/clone?destination=transport-files">clone</a>          </td>
                  <td class="views-field views-field-field-tf-baf-eb  views-field-editablefield" >
            <div id="editablefields-field-tf-baf-eb" class="editablefield-item"><div class="field-type-number-float field-name-field-tf-baf-eb field-widget-number form-wrapper" id="edit-field-tf-baf-eb-0-field-tf-baf-eb"><div id="field-tf-baf-eb-0-field-tf-baf-eb-add-more-wrapper"><div class="form-item form-type-textfield form-item-field-tf-baf-eb-0-field-tf-baf-eb-und-0-value">
  <input type="text" id="edit-field-tf-baf-eb-0-field-tf-baf-eb-und-0-value" name="field_tf_baf_eb[0][field_tf_baf_eb][und][0][value]" value="" size="12" maxlength="10" class="form-text" />
</div>
           <td class="views-field views-field-field-tf-shunts-enz" >

                  <td class="views-field views-field-field-tf-with" >
                      </td>
                  <td class="views-field views-field-field-tf-ex" >
                      </td>
                  <td >
            <a href="/transport-file/mail/192">Mail sturen</a>          </td>
              </tr>
      </tbody>
</table>

我们的目标是定位那些嵌套的输入元素并应用.onfocus();.onfocus();,这样我就可以计算这些值并将这些值放在同一行的另一个输入元素中。所以基本上我的客户想要使用这个table和excel表格一样的功能。

最初这个表每行有更多的td,但我粘贴了这个更短的html因为很多td在结构上相似。

1 个答案:

答案 0 :(得分:0)

jQuery.each()用于循环普通对象或数组,但是对于循环jquery对象,最好使用.each()方法,如下所示:

var row = jQuery("#views-form-transport-files-page > table > tbody > tr");
row.each(function(i) {
   console.log( $(this)[0].tagName );
});