35

私が書いているこのスクリプトでは、要素を取得するために .parent() を最大 7 回連続して使用していることに気付きました。これは機能しますが、私が気付いていない/機能を実行するためのより簡単な方法がある可能性がある/あるべきだと思われます。より多くの要素のより具体的なクラス/ID 以外のアイデアはありますか?

基本的に、私の質問は、outer以下の html で id 'innerSpan' のスパンへの参照がある場合、id で div にアクセスすることに要約されます。

<div id='outer'>
    <a href="some_url">
        <span id="inner">bla bla</span>
    </a>
</div>

したがって、現在、私は次のようなことをします：

var outer = $('#inner').parent().parent()

そして、それは深くネストされた要素でクレイジーになります。

もう一つの例：

ここに私のhtml：

<div id="options_right">
            <table id="product_options_list" class="table table-bordered">

            <tbody id="1">
                <tr>
                    <td>
                        <select name="option_1_val[0]" class="option_table_select">
                            <option value="Red">Red</option>
                            <option value="Blue">Blue</option>
                            <option value="Green">Green</option>
                            </select>
                    </td>
                    <td>
                        <table class="table sub_options" id="0">
                            <tbody>
                            <tr>
                                <td>
                                    <select name="option_1_sub[0][]" class="option_table_select  sub_option_select">
                                        <option value="">None</option>
                                        <option value="2">Size</option>
                                    </select>
                                    <div class="sub_option_value_holder">
                                        <select name="option_1_sub_val[0][]" class="sub_option_values" style="display:none;"></select>
                                    </div>
                                </td>
                                <td>
                                    <a href="#" class="remove_sub_option btn btn-primary">Remove</a>
                                </td>
                                <td>
                                    <a href="#" class="add_sub_option btn btn-primary">Add Another</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>

そして私のスクリプト。関数を作成し、メイン行 tbody の ID とセカンダリ テーブル ID を渡す必要があるため、行を動的に追加できます。この質問にはその機能は本当に必要ありませんが、基本的に私はそれらのIDを次のように取得します:

get_suboption_row($(this).parent().parent().parent().parent().parent().parent().parent().attr('id'), $(this).parent().parent().parent().parent().attr('id'));

ありがとう

jsFiddle: http://jsfiddle.net/Hg4rf/

別の追加をクリックしてイベントをトリガーします

4

4 に答える 4

56

ネストされたテーブルが 2 つあり、
必要なものを取得するには、この 2 つの DOM トラバーサル メソッドを使用する .closest()か、.parents()

  • .closest()自己または祖先。指定されたセレクターに一致するものが見つかるまで、DOM ツリーを上に移動します。
  • .parents()DOM ツリーをドキュメントのルート要素まで移動し、各祖先要素を一時的なコレクションに追加します。次に、セレクターが提供されている場合は、セレクターに基づいてそのコレクションをフィルタリングします

ネストされたテーブルの使用:

$(this).closest('table').closest('tbody').attr('id');


$(this).parents('table').parents('tbody').attr('id');

jsFiddle デモ

于 2012-07-19T20:25:16.147 に答える
7

私.closest()はあなたが探しているものだと思います:)

于 2012-07-19T20:25:14.973 に答える
4

CSS Class nameその要素の がわかっている場合は、closest()メソッドを呼び出すことができます

var thatParent=  $("#someId").closest(".somCSSClassName")

したがって、コード cal は次のように書き直されます

get_suboption_row($(this).closest("someClass").attr('id'),
                $(this).closest("someOtherClass").attr('id'));

編集：あなたのJSfiddleを見た後

クラス名を使用して、親テーブルを取得します。

 alert($(this).closest('tbody').closest('.table-bordered').attr('id'));

作業サンプル: http://jsfiddle.net/Hg4rf/2/

于 2012-07-19T20:25:48.307 に答える