如何在多个div内添加内容-在结束标记之前？

Question

在代表玩家资料的网页上，我目前有以下JavaScipt代码：

    var CHARTS = ['money', 'matches', 'game', 'pass', 'misere', 'catch'];
    var mobile = (/Android|iPhone|iPad|iPod|Blackberry|BB10/i.test(navigator.userAgent));

    if (!mobile) {
            $.each(CHARTS, function(index, title) {
                    $('#' + title + '_table').hide();
                    $('#' + title + '_button').button().click(function() {
                            $('#' + title + '_table').toggle();
                    });
            });
    }

这段HTML代码（请查看每个XXX_tab div中的最后两行）：

<div id="money_tab">
        <div id="money_chart" class="gchart"></div>
        <div id="money_slider" class="jslider"></div>
        <p><input type="button" value="Table" id="money_button"></p>
        <div id="money_table" class="gtable"></div>
</div>

<div id="matches_tab">
        <div id="matches_chart" class="gchart"></div>
        <div id="matches_slider" class="jslider"></div>
        <p><input type="button" value="Table" id="matches_button"></p>
        <div id="matches_table" class="gtable"></div>
</div>

<div id="game_tab">
        <div id="game_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="game_button"></p>
        <div id="game_table" class="gtable"></div>
</div>

<div id="pass_tab">
        <div id="pass_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="pass_button"></p>
        <div id="pass_table" class="gtable"></div>
</div>

<div id="misere_tab">
        <div id="misere_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="misere_button"></p>
        <div id="misere_table" class="gtable"></div>
</div>

<div id="catch_tab">
        <div id="catch_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="catch_button"></p>
        <div id="catch_table" class="gtable"></div>
</div>

我想通过JavaScript减少重复的HTML代码，该代码将在每个div标签的末尾附加以下两行：

        <p><input type="button" value="Table" id="catch_button"></p>
        <div id="catch_table" class="gtable"></div>

但我想知道，如何使用jQuery？ 我不能只是：

$.each(CHARTS, function(index, title) {
        $('#' + title + '_chart').append('XXX the 2 lines XXX');
        $('#' + title + '_table').hide();
        $('#' + title + '_button').button().click(function() {
                $('#' + title + '_table').toggle();
        });
});

因为有时图表后会有滑块。

所以我的问题是：使用jQuery，如何在每个<\\div>标签之前添加内容？

Answer 1

将类chart添加到选项卡元素

var CHARTS = ['money', 'matches', 'game', 'pass', 'misere', 'catch'];
var mobile = (/Android|iPhone|iPad|iPod|Blackberry|BB10/i.test(navigator.userAgent));

if (!mobile) {
    var $charts = $('.chart').append('<p><input type="button" value="Table" class="gbutton"></p><div class="gtable"></div>');
    $charts.find('.gtable').hide();
    $charts.find('.gbutton').button().click(function(){
        $(this).parent().next().toggle()
    });
}

Answer 2

尝试这个，

$.each(CHARTS, function(index, title) {
    if(! $('#'+title+'_tab').find('#'+title+'_button'').length)// check the element is exists or not
    {
       // use tab in place of chart
       $('#' + title + '_tab').append('XXX the 2 lines XXX');
    }

    $('#' + title + '_table').hide();
    $('#' + title + '_button').button().click(function() {
        $('#' + title + '_table').toggle();
    });
});