2

我的目标是获取页面上的所有 HTML，除了那些未选中复选框的 HTML 并将其发布到脚本中。

我通过复选框的值来做到这一点，该值是元素上的一个类。例如，我的复选框在表格的一行中，并且...

我想要的所有内容都在#page_content 中。由于内容不知道它的容器 - 也就是说复选框不知道它在表格内部所以不能环绕它，我认为更容易获取页面上的所有内容并删除未选中的元素. 这样我的标记是正确的。

我正在使用 jQuery 来执行此操作，但我不知道如何正确处理它。我想到的方法是获取所有未选中的复选框并将它们的值存储到变量“未选中”中。

我有一个 outerHTML() 函数，可以让我获取元素，它是 html。

然后我

$('#export').click(function(e) {
        e.preventDefault();
        var uc, unchecked = [], html;
        $('input:checkbox:not(:checked)').each(function() {
            unchecked.push("." + $(this).val());
        });
        uc = unchecked.join(',') + ",.actions,input,button,.btn";
        console.log(uc);
        $('#page_content').find('*').not(uc).each(function() {
            html += $(this).outerHTML();
        });
        console.log(html);
        // $('#export-data').val(html);
        // console.log($('#export-data').val());
    });

然后到最后，我得到了所有 HTML 的字符串。

更新：做了更多的工作，我得到了一些东西，但它是混合标签。此外，我想剥离输入和按钮以及其他类，所以我认为我做得对，但输出有很多重复项。嗯……

4

2 回答 2

1

嗨，这是一个如何做到这一点的例子。在示例中，它将返回除绿色类之一之外的所有元素。

代码已准备好复制粘贴并运行

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <style>
    DIV{
        width:200px;
        height:200px;
        display:inline-block;
    }
    .black{
        background:black;
    }
    .yellow{
        background:yellow;
    }
    .red{
        background:red;
    }
    .green{
        background:green;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="1" class="yellow"></div>
        <div id="2" class="black"></div>
        <div id="3" class="red"></div>
        <div id="4" class="green"></div>
    </div>
</body>
<script>
    $(document).ready( function (){
        var elements = $('*');
        var filterClass = 'green';
        elements = $.grep(elements,function(elementOfArray, indexInArray){
            clas = $(elementOfArray).attr('class');
            if(typeof(clas) ===  'undefined'){
                console.log('undef');
                return elementOfArray
            }
            if(clas.indexOf(filterClass) == -1){
                return elementOfArray;
            }
        });
        console.log(elements);
    });

</script>

于 2012-11-20T08:32:13.217 回答
0

好的，使用我的方法，我发现它更清晰，更 jquery-ish :)

var filter, html, el, unchecked = [], additional, elements;
$('input:checkbox:not(:checked)').each(function() {
    unchecked.push("#" + $(this).val());
});
// We remove checkboxes, cb colums, inputs, etc
additional = ".actions,input,button,.btn,textarea,.cb";
if (unchecked.length) {
    filter = unchecked.join(',') + "," + additional;
} else {
    filter = additional;
}
var $elements = $('#page_content').clone();
$elements.find(filter).remove();
html = $elements.outerHTML();
于 2012-11-23T02:26:43.243 回答