-2

最も近い子 tr から親 tr を見つけるにはどうすればよいですか。たとえば、2 番目の子 tr から、最初の親 tr に到達するにはどうすればよいですか?

以下は、私が使用している2つのテーブル構造です。

1)

 <table>
        <tr class="menu">
            <td><input type='text' class='parent' value='First Parent'></td>  
            <tr class="sub-menu">
                <td><input type='text' class='firstchild' value='First Child'>
                </td>

            </tr>
             <tr class="sub-menu">
                <td><input type='text' class='secondchild' value='Second Child'>
                </td>
            </tr>   
        </tr>
            <tr class="menu" >
            <td ><input type='text' class='parent' value='Second Parent'></td> 
            <tr class="sub-menu">
                <td><input type='text' class='firstchild' value='First Child'>
                </td>
                </tr>
            </tr>
    </table>

2)

    <table>
    <tr class="menu">
        <td><input type='text' class='parent' value='First Parent'></td>  
</tr>
        <tr class="sub-menu">
            <td><input type='text' class='child' value='First Child'>
            </td>
      </tr>

         <tr class="sub-menu">
            <td><input type='text' class='child' value='Second Child'>
            </td>
        </tr>   
    <tr  class="menu">

        <td><input type='text' class='parent' value='Second Parent'></td>  </tr>
        <tr class="sub-menu">
            <td><input type='text' class='child' value='First Child'>
            </td>
            </tr>

</table>

次の JQuery コードを試しました。

$(this).closest('tr.submenu').closest('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parent('tr.menu').find('.parent').val();

$(this).closest('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').prevUntil('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parentsUntil('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parents(':first-child').find('.parent').val();

すべての試みが失敗しました。最も近いサブメニューtrから親の値を取得するにはどうすればよいですか?

4

2 に答える 2

5

まず、テーブル構造が正しくありません。

<tr>サブテーブルを定義せずに、タグをネストすることはできません。

私はあなたのテーブル構造を修正し、あなたがやろうとしていることを実行する jQuery をいくつか提供しました。メニューにテーブルと入力を使用している理由は、私にはわかりません。

HTML:

<table>
     <tr class="menu">
         <td><input type='text' class='parent' value='First Parent' /></td>
     </tr>
     <tr class="sub-menu">
         <td><input type='text' class='firstchild' value='First Child' /></td>
     </tr>
     <tr class="sub-menu">
         <td><input type='text' class='secondchild' value='Second Child' /></td>  
     </tr>
     <tr class="menu" >
         <td ><input type='text' class='parent' value='Second Parent' /></td>
     </tr>
     <tr class="sub-menu">
         <td><input type='text' class='firstchild' value='First Child' /></td>
     </tr>
</table>

CSS (視覚効果用):

table td { padding: 10px; }

jQuery:

$('.firstchild').click(function() {
    var $this = $(this);

    $this.parents('tr').prev().css("background-color", "yellow");

});

ここで結果を表示できます: http://jsfiddle.net/357tE/

「最初の子」入力をクリックすると、その子の前にある「最初の親」が強調表示されます。

于 2013-01-31T20:51:51.713 に答える
3

解決策を見つけました：

$('.child').click(function() {
    var $this = $(this);

    $this.parents('tr').prevAll("tr.menu:first").css("background-color", "yellow");

});
于 2013-02-01T10:29:24.077 に答える