/    Sign up×
Community /Pin to ProfileBookmark

Slider puzzle jquery

Copy linkTweet thisAlerts:
Mar 12.2015

I’m trying to solve the sliding problem(3*3 grid) through jquery.

In my HTML file I have 8 li’s(9th empty).

<ul class=”Puzzle”>
<li class=”Box Box1″>1</li>
<li class=”Box Box2″>2</li>
<li class=”Box Box3″>3</li>
<li class=”Box Box4″>4</li>
<li class=”Box Box5″>5</li>
<li class=”Box Box6″>6</li>
<li class=”Box Box7″>7</li>
<li class=”Box Box8″>8</li>
</ul>

I want to access these li’s in my js(javascript file) through jQuery,so that I can implement the sliding effect.
I tried to convert them into arrays through jQuery.map() function but it didn’t work

var liclass = $(‘Puzzle li’).map(function(i,n){
return $(n).attr(‘class’);
}).get().join(‘,’)

Can someone please tell me how can I convert them into arrays and use them in my js file.

Thanks

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Ay__351_eMar 20.2015 — $('[COLOR="red"][B][SIZE=4].[/SIZE][/B][/COLOR]Puzzle li')


I delete [COLOR="#FF0000"].join(',')[/COLOR]


http://www.w3schools.com/js/js_array_methods.asp // The join() method also joins all array elements into a string.


I am new to jquery.

The code I try:

<br/>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
//http://www.webdeveloper.com/forum/showthread.php?308495-Slider-puzzle-jquery

// http://www.w3schools.com/jquery/jquery_examples.asp
// http://api.jquery.com/map/
// https://api.jquery.com/category/effects/sliding/


$(document).ready(function(){


var liclassArray = $('.Puzzle li').map(function(i,n){
// alert(n);
return $(n).attr('class');
}).get();

// http://api.jquery.com/jquery.type/
alert("liclassArray "+$.type(liclassArray)); // array


// http://www.w3schools.com/js/js_array_methods.asp // The join() method also joins all array elements into a string.
// http://www.w3schools.com/js/tryit.asp?filename=tryjs_array_join

var liclassStr = $('.Puzzle li').map(function(i,n){
// alert(n);
return $(n).attr('class');
}).get().join(',');

alert("liclassStr "+$.type(liclassStr)); // string



var liclass = $('.Puzzle li').map(function(i,n){
return $(n).attr('class');
}).get().join(',');


alert(liclass); // <br/>
alert("liclass "+$.type(liclass)); // string

alert( "type liclass "+$.type(liclass)); // string

//alert( $('.Puzzle li').map(function(i,n){return $(n).attr('class');})) // object Object

var obj = $('.Puzzle li').map(function(i,n){return $(n).attr('class');});
//alert(obj);
alert(" type obj "+$.type(obj) ); // object

alert(" isArray obj "+$.isArray(obj) ); // false

var gg= obj.get();

alert("obj.get() = "+obj.get()); // Box Box1,Box Box2,Box Box3,Box Box4,Box Box5,Box Box6,Box Box17,Box Box8

// http://api.jquery.com/jquery.isarray/
alert(" isArray "+$.isArray(gg) ); // true
var ss = obj.get().join(",");
alert(" isArray "+$.isArray(ss) ); // false

// http://api.jquery.com/jquery.type/
alert(" type "+$.type(ss) ); // string

var li0 = obj.get()[0];

alert("li0 = "+li0); // Box Box1

alert(" type li0 "+$.type(li0) ); // string

// http://www.w3schools.com/js/js_strings.asp
// http://www.w3schools.com/jsref/jsref_split.asp
/*
var vv = $("#bb").attr("class");
alert("li class = "+vv);
alert("$(vv) = "+$(vv));
$(vv).css("color", "yellow");
$(vv).hide();
*/
var aa = li0.split(" ");
alert("aa = "+aa); // // Box, Box1
alert( $.type(aa)); // array
var cls01 = aa[1];


var c0 = "."+cls01;


// http://www.w3schools.com/jquery/jquery_selectors.asp

$(c0).css("background-color", "red");

alert("Box1 background-color red");



var A = [];
for(var i=0; i&lt; liclassArray.length; i++){

A[i] = "."+ liclassArray[i].split(" ")[1];
$(A[i]).css("color","blue");
}

alert("A = "+A); // .Box1, .Box2, .Box3, .Box4, .Box5, .Box6, .Box7, .Box8,

$('.'+liclassArray[5].split(" ")[1]).hide();

$('.'+liclassArray[7].split(" ")[1]).hide();


// https://api.jquery.com/slideDown/

var count =0;
$( "#slayt" ).click(function () {
$( ".Puzzle li" ).hide();
$( A[count] ).slideDown( "slow" );
count++;
count = count % A.length;
//alert(count);
})


});


&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button id="slayt"&gt;slide down&lt;/button&gt;
&lt;ul class="Puzzle"&gt;
&lt;li id="bb" class="Box Box1"&gt;1&lt;/li&gt;
&lt;li class="Box Box2"&gt;2&lt;/li&gt;
&lt;li class="Box Box3"&gt;3&lt;/li&gt;
&lt;li class="Box Box4"&gt;4&lt;/li&gt;
&lt;li class="Box Box5"&gt;5&lt;/li&gt;
&lt;li class="Box Box6"&gt;6&lt;/li&gt;
&lt;li class="Box Box7"&gt;7&lt;/li&gt;
&lt;li class="Box Box8"&gt;8&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @almondn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...