Question

在代表player profiles的网页上，我目前有这个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代码结尾之前append这两行代码：

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

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

2 个答案: