Question

我在页面上有一堆输入的下面的布局，我想根据输入字段中是否存在值来排列它们。

如果＆＃34;父母＆＃34;容器有<tr class="Off">，然后整个内容应移到<div class="lowerParent">中，如果它包含<tr class="On">，则将其移至<div class="upperParent">。

这背后的目的是我有一个可能有50多个输入的页面，并非所有输入都会被使用，我想将那些有值的页面移到顶部，这样用户就不会这样做了。我必须向下滚动大部分未使用的输入字段。

<div class='upperParent'></div>
<div class='lowerParent'></div>

<div class="parent">
    <div class="collapsed">
        <table>
            <tr>
                <td class="headers">
                    <input type="text" name="ind1" value="0"><input type="text" name="ind2" value="1">
                </td>
            </tr>
            <tr class="On">
                <td class="subHeaders">Sub Header 1</td>
                <td><input type="text" name="datafieldtag_value[33]" value="1"></td>
            </tr>
            <tr class="On">
                <td class="subHeaders">Sub Header 2</td>
                <td><input type="text" name="datafieldtag_value[34]" value="2"></td>
            </tr>
            <tr class="On">
                <td class="subHeaders">Sub Header 3</td>
                <td><input type="text" name="datafieldtag_value[35]" value="3"></td>
            </tr>
        </table>
    </div>
</div>

<div class="parent">
    <div class="collapsed">
        <table>
            <tr>
                <td class="headers">
                    <input type="text" name="ind1" value="0"><input type="text" name="ind2" value="1">
                </td>
            </tr>
            <tr class="Off">
                <td class="subHeaders">Sub Header 1</td>
                <td><input type="text" name="datafieldtag_value[36]" value=""></td>
            </tr>
            <tr class="Off">
                <td class="subHeaders">Sub Header 2</td>
                <td><input type="text" name="datafieldtag_value[37]" value=""></td>
            </tr>
            <tr class="Off">
                <td class="subHeaders">Sub Header 3</td>
                <td><input type="text" name="datafieldtag_value[38]" value=""></td>
            </tr>
        </table>
    </div>
</div>

Answer 1

$('.parent').each(function(){
    if($('tr.Off', this).length > 0){
        $(this).appendTo('.upperParent');
    }else if($('tr.On', this).length > 0){
        $(this).appendTo('.lowerParent');
    }
});

对于每个div，检查是否存在tr.Off，如果是，则将其放在upperParent中，否则将其放在lowerParent中。

示例：http://jsfiddle.net/6H6kp/1/

Answer 2

假设你有

<div class='upperParent'><table></table></div>
<div class='lowerParent'><table></table></div>

你可以做到

$('.upperParent table').append( $("tr.On").detach() );
$('.lowerParent table').append( $("tr.Off").detach() );

误读了这个问题。

使用jQuery选择和组织DIV

2 个答案: