2

私は Sage CRM をカスタマイズしているので、書かれた HTML を制御できず、CRM が出力するテーブル レイアウトに ID やクラスを追加できません。選択ドロップダウンのユーザー選択に基づいて、より高い (最上位ではない) レベルのテーブルを非表示にしたいと考えています。非表示にしたいテーブル内のテーブルのタイトル行にフックされたjQueryセレクターのみを取得できます。

DOM は次のようになります。

//Lots of other table structures above this in the DOM....
<table>  <---- this is the table I want to show or hide based on the users selection
  <tbody>
    <tr>
     <td>
       <table>
         <tbody>
           <tr>
             <td class="PANEREPEAT">  <---- this is the node I can get selector to
                 Valuation information
////

だから私は以下のクライアント側のJavaScriptを行います:

    var val_information_screen;

    $('.PANEREPEAT').filter(function () {
        //Find the valuation information screen
        return $(this).text() == 'Valuation information';
    }).each(function () { //iterate through all of these (there should only be one!)
        val_information_screen = $(this);
    });

    var sel_ofee_type = $('#ofee_type');
    if (sel_ofee_type.val() == '006') {
        val_information_screen.closest('table').parents("table:first").show();
    } else {
        val_information_screen.closest('table').parents("table:first").hide();
    }

それは機能しますが、特に美しいわけではありません。私が本当に嫌いなビットは以下です。jQueryを使用してDOMをトラバースするより良い方法はありますか?

val_information_screen.closest('table').parents("table:first").show();
val_information_screen.closest('table').parents("table:first").hide();
4

2 に答える 2