user1033882 user1033882 - 4 months ago 22
jQuery Question

jquery sortable('toArray') only if element belongs in another array

I have a page with many div boxes rendered using bootstrap 3. I want some of them to be sortable. Each div that i want to be sortable has a specific data- attribute (ex: data-sortable="box-1", data-sortable="box-2" etc)

Doing this though:

$(".connectedSortable").sortable({
placeholder: "sort-highlight",
connectWith: ".connectedSortable",
handle: ".box-header, .nav-tabs",
forcePlaceholderSize: true,
zIndex: 999999,
stop: function(event, ui) {
var columns = [];
$(".ui-sortable").each(function(){
columns.push($(this).sortable('toArray').join(','));
});
}
});


will add some other divs inside the array, because some static divs have their own mini-sortable items that i deal with elsewhere.
I want to somehow separate those, and insert only the divs with the specific data-sortable tag.

With this:

$(".row").each(function(){
var divsWithTag = $(this).find('[data-sortable]');
}


i can get all the divs that i want. Is there a way i can tweak this line here

columns.push($(this).sortable('toArray').join(','));


to push only the divs that match elements inside divsWithTag variable?

Answer

You can use filter, and considering the fact that toArray returns an array of id-s. Below, the .attr() value is coerced to a boolean:

finalColumns.push($(this).sortable('toArray').filter(function(id) {
    return $('#'+id).attr('data-sortable');
}).join(','));

Or use .is (as in the original comment) instead of the id match /originally thought the attribute-match collection would only be looked up once/

http://jsfiddle.net/h8h9u0k7/3/

Comments