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

My goal is to get all the HTML on a page except those which checkboxes are unchecked and post it to a script.

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

I do this by having checkboxes with a value which is a class on an element. For example my checkbox is in a row on a table and that ...

我通过使用一个值为元素类的复选框来实现此目的。例如,我的复选框在一张桌子上排成一排......

All the content I want is inside #page_content. As the content isn't aware of it's container - that is the checkbox doesn't know it's inside of the table so can't wrap around it, I figured it's easier to get everything on the page and just remove the elements that are unchecked. That way my markup is correct.

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

I am using jQuery to do this, but I don't know how to approach it correctly. The way I have in mind is to get all the unchecked checkboxes and store their values into a variable 'unchecked'.

我使用jQuery来做到这一点,但我不知道如何正确处理它。我想到的方法是获取所有未选中的复选框并将其值存储到变量“unchecked”中。

I have an outerHTML() function that can get me the element and it's html.

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

Then I

$('#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());
    });

Then by the end of it I have this string of all the HTML.

然后到最后我有这个所有HTML的字符串。

Update: Worked a bit more on it, I get something but it's mixed tags. Also I want to stript out inputs and buttons and other classes so I think I'm doing it right but the output has many duplicates. Hmmm....

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

2 个解决方案

#1

Hi here is an example of how you can do it. in the example it will return all elements except the one of class green.

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

code is ready to be copy pasted and run

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

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

#2

Ok using my method I found it clearer and more jquery-ish :)

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

#1