jQuery - 将段落中的每个偶数都加粗

Question

I am working on a puzzle in jQuery. I found out how to generate random numbers, but now I want to iterate over these numbers and make them bold if the number is even.

$("button").on("click", function() {
    var countNumbers = Number($("input[type=number]").val());
    for (var i = 0; i < countNumbers; i++) {
        var rand = Math.floor(Math.random() * 15000);
        $("#numbers").text($("#numbers").text() + rand + " ");
    }

    var numbers = $("#numbers").text().split(' ');
    for (var i = 0; i < numbers; i++) {
        if (Number(numbers[i]) % 2 === 0) {
            numbers[i] = "<span class='bold'>" + numbers[i] + "</span>";
        }
    }
    $("#numbers").html(numbers.join(' '));
});

It seems like the bold class is not getting added to any of the elements. Any ideas why it's not working?

http://jsfiddle.net/rL3y28cm/

Answer 1

You need to change for loop condition to i < numbers.length , use length property to get array size

 $("button").on("click", function() { var countNumbers = Number($("input[type=number]").val()); for (var i = 0; i < countNumbers; i++) { var rand = Math.floor(Math.random() * 15000); $("#numbers").text($("#numbers").text() + rand + " "); } var numbers = $("#numbers").text().split(' '); for (var i = 0; i < numbers.length; i++) { //------------------------^----------- if (Number(numbers[i]) % 2 === 0) { numbers[i] = "<span class='bold'>" + numbers[i] + "</span>"; } } $("#numbers").html(numbers.join(' ')); }); 

 .bold { font-weight: bold } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="number" /> <button>Generate Numbers</button> <p id="numbers"></p> 

Update : You can reduce your code and make it more simple

 $("button").on("click", function() { var countNumbers = Number($("input[type=number]").val()); var res = []; // array for storing the random number for (var i = 0; i < countNumbers; i++) { var rand = Math.floor(Math.random() * 15000); // generating random number res.push(rand % 2 == 0 ? "<span class='bold'>" + rand + "</span>" : rand); // checking even or odd and wrapping by span if needed finally pushing the string to array } $("#numbers").html(res.join(' ')); // joining the array value and set it as html }); 

 .bold { font-weight: bold } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="number" /> <button>Generate Numbers</button> <p id="numbers"></p> 

Answer 2

It is easier and more performant to generate the random number, add the span, collect all numbers (with bold or not) into a string, and apply them at once to the HTML:

 $("button").on("click", function() { var countNumbers = Number($("input[type=number]").val()); var randStr = ''; for (var i = 0; i < countNumbers; i++) { var rand = Math.floor(Math.random() * 15000); randStr += (rand % 2 === 0 ? "<span class='bold'>" + rand + "</span>" : rand) + ' '; } $("#numbers").html(randStr); }); 

 .bold { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" /> <button>Generate Numbers</button> <p id="numbers"></p>