jquery按顺序插入内容

老大，你把需求描述清楚啊这种是不是你想要的啊<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[name='prosize']").click(function () {
                if ($(this).attr("checked")) {
                    var _html = gettd($(this).val());
                    $(this).after(_html);
                }
                else {
                    $(this).next().remove();
                }
            });            function gettd(size) {
                var html = "<p class='" + size + "'>尺码:" + size + "<input type='text' value='款号'></p>";
                return html;
            }        });
    </script>
</head>
<body>
<input type="checkbox" name="prosize" value="38" />38<br/>
<input type="checkbox" name="prosize" value="39" />39<br/>
<input type="checkbox" name="prosize" value="40" />40<br/>
<input type="checkbox" name="prosize" value="41" />41<br/>
<input type="checkbox" name="prosize" value="42" />42<br/>
</body>
</html>

另外一种效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[name='prosize']").click(function () {
                if ($(this).attr("checked")) {
                    var _html = gettd($(this).val());
                    $("#temp").append(_html);
                }
                else {
                    $("#temp").find("." + $(this).val()).remove();
                }
            });            function gettd(size) {
                var html = "<p class='" + size + "'>尺码:" + size + "<input type='text' value='款号'></p>";
                return html;
            }        });
    </script>
</head>
<body>
<input type="checkbox" name="prosize" value="38" />38<br/>
<input type="checkbox" name="prosize" value="39" />39<br/>
<input type="checkbox" name="prosize" value="40" />40<br/>
<input type="checkbox" name="prosize" value="41" />41<br/>
<input type="checkbox" name="prosize" value="42" />42<br/>
<div id="temp"></div>
</body>
</html>

在选取的时候不要去获取值，在提交的时候再去获取被选中的checkbox的值肯定就是顺序的了。
function getCheckbox() {
var str="";
$("input[name='checkbox']:checkbox").each(function(){
if($(this).attr("checked")){
str += $(this).val()+","
}
})
str.split(",");
alert(str[0]);
}
在.NET后台可以用这样的方法获取
string checkStr = Request["prosize"];

        jQuery(document).ready(function () {
            jQuery("input[type='checkbox'][name='prosize']").click(function () {
                alert(setVal());
            });
        });
        var _ilist = "";
        function setVal() {
            _ilist = "";
            jQuery("input[type='checkbox'][name='prosize']:checked").each(function (i, item) {
                _ilist = _ilist + jQuery(item).val() + ",";
            });
            return _ilist.length > 0 ? _ilist.substring(0, _ilist.length - 1) : "";
        }

function setVal() {
_ilist = "";//这句是清空的意思吗？可是执行下来．数据会出现3838,3938,39,41

给你个样例吧<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {            $("input[name='prosize']").click(function () {
                if ($(this).attr("checked")) {
                    var html = gettd($(this).val());
                    if ($("#haha p").length == 0) {
                        $("#haha").append(html); //haha是我加的div在这个中显示html内容
                    }
                    else {
                        var pb = $("#haha p");
                        var sizes; //比较的size
                        for (var i = 0; i < pb.length; i++) {
                            sizes = pb.eq(i).attr("class");
                            if ($(this).val() < sizes) {
                                break;
                            }
                        }
                        if (i == pb.length) {
                            //没有比当前选择的size大的就在最后加
                            $("#haha").append(html);
                        } else {
                            //有比当前选择的size大的，在同级的(P标签)前面加上此html
                            $("." + sizes).before(html);
                        }
                    }
                }
                else {
                    $("." + $(this).val()).remove();
                }
            });
        })
        function gettd(size) {
            var html = "<p class='" + size + "'>尺码:" + size + "－<input type='text' value='款号'/></p>";
            return html;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="checkbox" name="prosize" value="38" />38
        <input type="checkbox" name="prosize" value="39" />39
        <input type="checkbox" name="prosize" value="40" />40
        <input type="checkbox" name="prosize" value="41" />41
        <input type="checkbox" name="prosize" value="42" />42
        <div id="haha">
        </div>
    </div>
    </form>
</body>
</html>你把其中的jquery引用的位置换掉就可以了

看错了．我需要在要插入的ＤＩＶ中将原来ＤＩＶ中的内容清空．．你的成功
这个是我想要的效果．．完美！不过我还在想　liuchaolin 提出的方法．说的很有道理．在慢慢消化．．谢谢各位大哥！

写了一个比较浅显的，应该比较好看懂<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var ary = new Array();
            $("input[name='prosize']").click(function () {
                if ($(this).attr("checked")) {
                    var _html = gettd($(this).val());
                    ary.push(_html);
                    ary.sort(function (a, b) {
                        var _a = parseInt($(a).attr("class"), 10);
                        var _b = parseInt($(b).attr("class"), 10);
                        return _a > _b ? 1 : -1;
                    });
                    $("#temp").html(ary.join(""));
                }
                else {
                    var _delVal = $(this).val();
                    for (var i = 0, count = ary.length; i < count; i++) {
                        var _delIndex = $(ary[i]).attr("class");
                        if (_delVal == _delIndex) {
                            ary.splice(i, 1);
                        }
                    }
                    $("#temp").find("." + $(this).val()).remove();
                }
            });            function getCount() {
                return $("#temp").children("p").length;
            }            function gettd(size) {
                var html = "<p class='" + size + "'>尺码:" + size + "<input type='text' value='款号'></p>";
                return html;
            }        });
    </script>
</head>
<body>
<input type="checkbox" name="prosize" value="38" />38<br/>
<input type="checkbox" name="prosize" value="39" />39<br/>
<input type="checkbox" name="prosize" value="40" />40<br/>
<input type="checkbox" name="prosize" value="41" />41<br/>
<input type="checkbox" name="prosize" value="42" />42<br/>
<div id="temp"></div>
</body>
</html>

喔，对了，getCount方法没有用到

调试易

jquery按顺序插入内容

解决方案 »