jquery - jQueryは特定のhtmlコンテンツを選択します

Question

この.children()セレクターを使用して、2 つの 2 種類のコンテンツを選択しています<div>s。

1. 「out_」で始まるクラスを持つテーブル

2. ID が「chart1」に等しいチャート

その結果、次の jQuery ステートメントを使用しています。

var jq_html = $("div.articles_output").children("table[class*=out_]:not(div#chart1,table:hidden)").clone().html();

HTML

<div class="articles_output">
        <h2 class="model_header">IEC Output</h2>
    <form>
        <table align="center">
            <!--end 04uberoutput_start-->
            <table width="600" border="1" class="out_1">
                <tr>
                    <th width="300" scope="col">User Inputs</th>
                    <th width="300" scope="col">Values</th>
                </tr>
                <tr>
                    <td>LC50 or LD50</td>
                    <td>33.00</td>
                </tr>
            </table>
            <p>&nbsp;</p>
            <table width="600" border="1" class="out_2">
                <tr>
                    <th width="300" scope="col">IEC Outputs</th>
                    <th width="300" scope="col">Values</th>
                </tr>
                <tr>
                    <td>Z Score</td>
                    <td>5.95</td>
                </tr>
            </table>
            <table width="600" border="1" class="out_2" style="display:none">
                <tr>
                    <th width="300" scope="col">IEC Outputs</th>
                    <th width="300" scope="col">Values</th>
                </tr>
                <tr>
                    <td>Z Score</td>
                    <td>5.95</td>
                </tr>
            </table>
        </table>
        <div id="chart1" style="margin-top:20px; margin-left:20px; width:650px; height:400px;"></div>
        <div id="chart1" style="margin-top:20px; margin-left:20px; width:650px; height:400px;"></div>
    </form>
</div>

私は自分の主張に何か問題があることに気づきました.children。それで、誰か私にいくつかの提案をしてもらえますか？これがデモです。

アップデート

問題の原因がどこにあるのかがわかったと思います。しかし、それを解決する方法がわかりません。formタグを外したら。次に、私のjQueryステートメントが機能します。デモ