如何将数组项添加到< li> jQuery的 [英] How to add array items to <li> Jquery

问题描述

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

I'm working on something really simple, a short quiz, and I am trying to make the items I have listed in a 2-d array each display as a <li>. I tried using the JS array.join() method but it didn't really do what I wanted. I'd like to place them into a list, and then add a radio button for each one.

我对Jquery进行了一次小小的飞跃，所以很多都是我对语法的不熟悉。我在他们的API上浏览了一些东西， $。每个 ......？我确信这就像for语句一样，我无法让它工作而不会崩溃我所拥有的一切。

I have taken the tiny little leap to Jquery, so alot of this is my unfamiliarity with the "syntax". I skimmed over something on their API, $.each...? I'm sure this works like the for statement, I just can't get it to work without crashing everything I've got.

这是HTML非常有趣的东西。

Here's the HTML pretty interesting stuff.

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

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

And, here is some extremely complex code. Hold on to your hats...

$(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="ans"/>' + value + '</li>'
            }).join('');
            $ul.html(ansstring);

            counter++;
        } else {
            $facts.text('You are done with the quiz.');
            $(this).hide();
        }
    });
    //
});

演示：小提琴

这篇关于如何将数组项添加到< li> jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！