2

私の目標は、チェックボックスがオフになっているものを除いてページ上のすべての 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

こんにちは、これはあなたがそれを行う方法の例です。この例では、クラス green の要素を除くすべての要素を返します。

コードをコピーして貼り付けて実行する準備ができました

<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っぽいことがわかりました:)

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 に答える