JavaScript按顺序排列数组

Question

I am trying to keep an array in a particular order, and I've learned about the splice function to insert in a specific index location, but it doesn't seem to do the right thing.

Here's a fiddle of what I have so far: http://jsfiddle.net/drumichael/7r2pV/277/

In section 1, you can select one or many of the options, however "First" should always be 1st, "second" 2nd, and "Fourth" after both of those. If you only choose "First" & "Fourth", they should be in that order regardless of the order in which you checked the boxes.

In section 2 - you may only choose ONE of Options A, B, & C... and that option should always be in the 3rd position of the array (unless you didn't choose ANY items from Section 1 of course, it would be all by itself inside the array).

Honestly I'm not sure where to go from here. I've tried this:

var array_position = $(this).attr('id');
var messagePart = $(this).attr('data-message');

message.splice(array_position, 0, messagePart);

But they still dont end up in the proper order.

Answer 1

When using splice() the index the item is inserted to should be 0 -indexed. For example:

var arr = [1,2,3,5,6];
arr.splice(3, 0, 4);

will insert 4 into the 3rd 0 -indexed location.

Also, you need to use 0 as the 2nd parameter in splice when inserting a value like you want.

To make your code work you should change the id parameter of each input to be 0 -indexed, and then use splice() to insert the item.

$(".mycheckbox").on("change", function() {
  var message = [];
  $('.mycheckbox:checked').each(function() {
    var messagePart = $(this).attr('data-message');
    message.splice($(this).attr('id'), 0,messagePart);
  });
  $(".summary").html(message.join(", "));
});

Here's a working example:

 $(".mycheckbox").on("change", function() { var message = []; $('.mycheckbox:checked').each(function() { var messagePart = $(this).attr('data-message'); message.splice($(this).attr('id'), 0,messagePart); }); $(".summary").html(message.join(", ")); }); $("input:checkbox").on('click', function() { // in the handler, 'this' refers to the box clicked on var $box = $(this); if ($box.is(":checked")) { // the name of the box is retrieved using the .attr() method // as it is assumed and expected to be immutable var group = "input:checkbox[name='" + $box.attr("name") + "']"; // the checked state of the group/box on the other hand will change // and the current value is retrieved using .prop() method $(group).prop("checked", false); $box.prop("checked", true); } else { $box.prop("checked", false); } }); 

 .selection_area { border: 1px solid gray; margin-bottom: 10px; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selection_area"> <h4>Select as many of these options as desired</h4> <p>Should appear in numerical order</p> <input type="checkbox" class="mycheckbox" id="1" data-message="Second" />Second <br/> <input type="checkbox" class="mycheckbox" id="0" data-message="First" />First <br/> <input type="checkbox" class="mycheckbox" id="3" data-message="Fourth" />Fourth <br/> </div> <h5>Summary of Selections:</h5> <div class="summary"></div> 

Here's an updated JSFiddle .

Answer 2

Since the id's are numbered in the order you want, you can sort $('.mycheckbox:checked') by id. Then use the $.each function.

$(".mycheckbox").on("change", function() {
  var message = [];
  $('.mycheckbox:checked').sort(function(a, b) {
    return parseInt(a.id) > parseInt(b.id);
  }).each(function() {
    var messagePart = $(this).attr('data-message');
    message.push(messagePart);
  });
  $(".summary").html(message.join(", "));
});

DEMO: http://jsfiddle.net/kom7hd5o/

Resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort