Сохранение массива JavaScript в порядке

Question

Я пытаюсь сохранить массив в определенном порядке, и я узнал о функции сплайсинга для вставки в определенное местоположение индекса, но, похоже, он не делает правильных действий.

Вот скрипку того, что я до сих пор: http://jsfiddle.net/drumichael/7r2pV/277/

В разделе 1, вы можете выбрать один или многие из вариантов, однако «Первый» всегда должен быть первым, «второй» 2-й, и «Четвертый "после обоих из них. Если вы выбрали только «First» & «Четвертый», они должны быть в этом порядке, независимо от того, в каком порядке вы отметили поля.

В разделе 2 вы можете выбрать только один из вариантов A, B, & C ... и этот параметр всегда должен находиться в 3-й позиции массива (если вы не выбрали ЛЮБЫЕ элементы из раздела 1 Конечно, это было бы само по себе внутри массива).

Честно говоря, я не уверен, куда идти отсюда. Я пробовал:

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

message.splice(array_position, 0, messagePart); 

Но они все еще не в порядке.

Answer 1

Поскольку идентификаторы нумеруются в том порядке, который вы хотите, вы можете сортировать по id. Затем используйте функцию $.each.

$(".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/

Ресурс: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

При использовании splice() с индексом элемент должен быть 0-indexed. Например:

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

вставит 4 в 3 0 -indexed место.

Кроме того, вы должны использовать 0 в качестве второго параметра в splice при введении значения, как вы хотите.

Для того, чтобы ваш код работал, вы должны изменить параметр id каждого входа 0 -indexed, а затем использовать splice(), чтобы вставить элемент.

$(".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(", ")); 
}); 

Вот рабочий пример:

$(".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>

Вот updated JSFiddle.