0

I have the below layout for a bunch of inputs on a page and I would like to arrange them based on whether or not a value is present within an input field.

If the "parent" container has a <tr class="Off"> then the entire thing should be moved into the <div class="lowerParent"> and if it contains <tr class="On"> then move it to the <div class="upperParent">.

The purpose behind this is that I have a page with potentially 50+ inputs, not all of which are going to be used, and I would like to move those which have values toward the top, so the user doesn't have to scroll down a huge page of input fields that are mostly not used.

<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>
4

2 回答 2

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

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

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

于 2013-02-08T19:21:20.853 回答
0

假设你有

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

你可以做

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

误读了问题。

于 2013-02-08T19:25:30.563 回答