Question

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

我通过使用一个值为元素类的复选框来实现此目的。例如，我的复选框在表格中排成一行......

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

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

我有一个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的字符串。

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

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

Answer 2

好的，使用我的方法，我发现它更清晰，更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();

获取页面上的所有html，除了具有特定类的HTML

2 个答案: