如何将数组项添加到 <li> Jquery

How to add array items to <li> Jquery

本文关键字：Jquery li 数组 添加      更新时间：2023-09-26

我正在做一些非常简单的事情，一个简短的测验，我正在尝试将我列出的项目放在二维数组中，每个项目都显示为<li>。 我尝试使用 JS array.join() 方法，但它并没有真正做到我想要的。 我想将它们放入一个列表中，然后为每个单选按钮添加一个单选按钮。

我已经对Jquery进行了小小的飞跃，所以其中很多是我对"语法"的不熟悉。 我在他们的 API 上浏览了一些东西，$.each...？ 我确定这就像 for 语句一样工作，我只是无法在不崩溃我所拥有的一切的情况下让它工作。

这是HTML非常有趣的东西。

<div id="main_">
    <div class="facts_div">
        <ul>            
        </ul>
    </div>
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me">
    </form>
</div>

而且，这里有一些极其复杂的代码。 抓紧你的帽子...

$(document).ready (function () {
    var array = [["Fee","Fi","Fo"], 
    ["La","Dee","Da"]];
    var q = ["<li>Fee-ing?","La-ing?</li>"];

    var counter = 0;
    $('.myBtn').on('click', function () {
        $('#main_ .facts_div').text(q[counter]);
        $('.facts_div ul').append('<input type= "radio">' 
            + array[counter]);
        counter++;
        if (counter > q.length) {
            $('#main_ .facts_div').text('You are done with the quiz.');
            $('.myBtn').hide();
        }
    }); 
});

尝试

<div id="main_">
    <div class="facts_div"> <span class="question"></span>
        <ul></ul>
    </div>
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me" />
    </form>
</div>

和

jQuery(function ($) {
    //
    var array = [
        ["Fee", "Fi", "Fo"],
        ["La", "Dee", "Da"]
    ];
    var q = ["Fee-ing?", "La-ing?"];

    var counter = 0;
    //cache all the possible values since they are requested multiple times
    var $facts = $('#main_ .facts_div'),
        $question = $facts.find('.question'),
        $ul = $facts.find('ul'),
        $btn = $('.myBtn');
    $btn.on('click', function () {
        //display the question details only of it is available
        if (counter < q.length) {
            $question.text(q[counter]);
            //create a single string containing all the anwers for the given question - look at the documentation for jQuery.map for details 
            var ansstring = $.map(array[counter], function (value) {
                return '<li><input type="radio" name="answers"/>' + value + '</li>'
            }).join('');
            $ul.html(ansstring);
            counter++;
        } else {
            $facts.text('You are done with the quiz.');
            $(this).hide();
        }
    });
    //
});

演示：小提琴

您可以使用

$.each遍历array[counter]并为您的选项创建li元素：

var list = $('.facts_div ul');
$.each(array[counter], function() {
    $('<li></li>').html('<input type="radio" /> ' + this).appendTo(list);
}

第一个参数是你的数组，第二个参数是一个匿名函数来执行你的操作，this在其中保存当前元素值。

此外，如果您这样做：

$('#main_ .facts_div').text(q[counter]);

您将用q[counter]替换元素的内容，在其中丢失ul标签。在这种情况下，您可以使用 prepend 方法而不是 text 将此文本添加到标记的开头，或者创建一个仅用于保存这段文本的新元素。

相关文章：