0

在代表玩家资料的网页上，我目前有这个 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>标签之前添加东西？

4

2 回答 2

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()
    });
}
于 2013-10-10T11:20:12.940 回答
0

尝试这个，

$.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();
    });
});
于 2013-10-10T11:20:59.560 回答