We Keep Coding

Quicksand plugin. How to get one item in two different data-attributes?

I would like to receive one item picture while clicking on two different data-attributes <li>.
One item has got two options to select and should be visible while clicking on two different links.
There are data-rooms and data-option attributes in one list element.
My code looks like:
HTML:
<ul id="filterOptions">
<li>Wszystkie</li>
<li>Kawalerka</li>
<li>2 pokojowe</li>
<li>3 pokojowe</li>
<li>Sprzedaż</li>
<li>Wynajem</li>
</ul>
<ul class="ourHolder">
<li class="item" data-id="id-1" data-rooms="3pokoje" data-option="wynajem">
<img src="img/oferta/4.jpg" />
</li>
<li class="item" data-id="id-2" data-rooms="3pokoje">
<img src="img/oferta/3.jpg" />
</li>
<li class="item" data-id="id-3" data-rooms="2pokoje">
<img src="img/oferta/2.jpg" />
</li>
<li class="item" data-id="id-4" data-rooms="kawalerka">
<img src="img/oferta/3.jpg" />
</li>
<li class="item" data-id="id-5" data-rooms="sprzedaz">
<img src="img/oferta/4.jpg" />
</li>
</ul>
JS:
$(document).ready(function() {
var $filterType = $('#filterOptions li a.active').attr('class');
var $holder = $('ul.ourHolder');
var $data = $holder.clone();
$('#filterOptions li a').click(function(e) {
$('#filterOptions li a').removeClass('active');
var $filterType = $(this).attr('class');
$(this).addClass('active');
if ($filterType == 'all') {
var $filteredData = $data.find('li');
} else if ($filterType == 'li[data-rooms=') {
var $filteredData = $data.find('li[data-rooms=' + $filterType + ']');
} else if ($filterType == 'li[data-option=') {
var $filteredData = $data.find('li[data-option=' + $filterType + ']');
} else {
var $filteredData = $data.find('li[data-rooms=' + $filterType + '] + li[data-option=' + $filterType + ']');
}
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
return false;
});
});

For loop closure

I am hoping someone could help me out here in explaining to me what it is with my code that is not outputting what I am expecting. I have played with this and still can't figure out why the inside closure is not outputting anything.
for (var i = 1, len = $('.items').length + 1; i < len; i = i + 1) {
var j = (function(i) {
for (j = 0; j < i.length; j = j + 1) {
$('nav').find('ul').addClass('tier' + j + '-items');
}
})(i);
}
Here is the HTML
<nav>
<ul class="items">
<li class="item">Top level 1</li>
<li class="item">Top level 1
<ul>
<li class="item">level 2</li>
<li class="item">level 2</li>
<li class="item">level 2
<ul>
<li class="item">level 3</li>
<li class="item">level 3</li>
<li class="item">level 3</li>
</ul>
</li>
</ul>
</li>
<li class="item">Top level 1</li>
</ul>
</nav>
EDIT
I updated hoping this would work but no luck:
for (var i = 0, len = $('.items').length; i < len; i = i + 1) {
(function(j) {
for (var j = 0; j < i; j = j + 1) {
$('nav').find('ul').addClass('tier' + j + '-items');
}
})(i);
}
EDIT 2:
Sorry it was not clear what I was trying to do. Spencer was able to understand after a couple times and I appreciate the help. Thank you for your help.

That's because i.length is undefined. i is a number, it dose not have a .length property to it. That will make it so the inner loop never runs.
Edit:
I'm going to assume that what you want is to add the class 'tierN-items' where N is the depth of the list as a tree. So your output would look like so:
<nav>
<ul class="items tier1-items">
<li class="item">Top level 1</li>
<li class="item">Top level 1
<ul class= "tier2-items">
<li class="item">level 2</li>
<li class="item">level 2</li>
<li class="item">level 2
<ul class= "tier3-items">
<li class="item">level 3</li>
<li class="item">level 3</li>
<li class="item">level 3</li>
</ul>
</li>
</ul>
</li>
<li class="item">Top level 1</li>
</ul>
</nav>
For that what you seem to do isn't going to work because you are finding all ul in the nav regardless of the value of j. You are going to need a different approach. My solution would be modifying the selector as a string variable. Basically we find if the first ul exist, then we find if there is a ul > li > ul, then ul > li > ul > li > ul, and so on until there isn't such an element. In code that would look like so:
var level = 1;
var tierSearch = "nav > ul";
while($(tierSearch).length)
{
$(tierSearch).addClass('tier' + level + '-items');
level++;
tierSearch += "> li > ul";
}
Fiddle Example

Is this what you want
$(function(){
$('.items ul').each(function(k,v){
$(this).addClass('tier' + k + '-items');
$(this).prepend('<strong>Tier' + k + '-items</strong>'); // just to highlight
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="items">
<ul >
<li class="item">Top level 1</li>
<li class="item">Top level 1
<ul>
<li class="item">level 2</li>
<li class="item">level 2</li>
<li class="item">level 2
<ul>
<li class="item">level 3</li>
<li class="item">level 3</li>
<li class="item">level 3</li>
</ul>
</li>
</ul>
</li>
<li class="item">Top level 1</li>
</ul>
</nav>

how to dynamically create ul and li elements by for loop in javascript

I am trying to create ul and li element in my codes by using javascript.
my javascript code :
for (var i =0;i<locations.length;i++)
{
//how to dynamic create ul and li code as follow ul and li code?????
}
ul and li code :
<li>
<label for="Device"><SCRIPT LANGUAGE="JavaScript"> document.write("show javascript value like the the locations[i]") </SCRIPT></label> <input type="checkbox" id="Device" />
<ol>
<li class="file">File 1</li>
<li>
<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file">Subfile 1</li>
<li class="file">Subfile 2</li>
<li class="file">Subfile 3</li>
<li class="file">Subfile 4</li>
<li class="file">Subfile 5</li>
<li class="file">Subfile 6</li>
</ol>
</li>
</ol>
</li>

Check here...
Script:
var ul = document.createElement("ul");
document.body.appendChild(ul);
for (var i = 1; i <= 10; i++)
{
var li = document.createElement("li");
li.className = "file";
var a = document.createElement("a");
a.innerHTML = "Subfile " + i;
li.appendChild(a);
ul.appendChild(li);
}
like this you can create your desired order..

Please check Example
HTML
<li>
<label for="Device"><SCRIPT LANGUAGE="JavaScript"> document.write("show javascript value like the the locations[i]") </SCRIPT></label> <input type="checkbox" id="Device" />
<ol>
<li class="file">File 1</li>
<li>
<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" />
<div id='mi'></div>
</li>
</ol>
</li>
JS
var text = '<ol>';
for (var i =0;i<6;i++)
{
text = text + "<li class='file'><a href=''>Subfile " + i + "</a></li>";
}
text = text +'</ol>';
document.getElementById('mi').innerHTML=text;
Here i have put <LI> in for loop in js and store it to variable then set it on div html.

I just answered a similar question, earlier, take a look at my example here using some of jQueries effects.
var list = $('#theList li:last-child'),
limit = 20,
current = 0;
function rand() {
return Math.random().toString(36).substr(2); // Just for some random contnt
}
$('#trigger').click(function() { // We're using a static button to start the population of the list
var end = setInterval(function() {
if ( current == limit ) {
current = 0;
clearInterval(end);
}
list.append('<li style="display:none;color:green;">' + rand() + '</li>');
var newList = $('#theList li:last-child');
newList.fadeIn();
var colorEnd = setInterval(function() {
newList.css('color', 'black');
clearInterval(colorEnd);
}, 350);
current = current + 1;
}, 300);
});

Add count classes for nested list elements with jQuery

I have this HTML:
<ul class="parent">
<ul>
<li>
<ul></ul>
</li>
<li>
<ul>
<li>
<ul></ul>
</li>
</ul>
</li>
</ul>
</ul>
I need to add count classes for all nested lists in this markup, to reach this:
<ul class="parent">
<ul class="level-1">
<li>
<ul class="level-2"></ul>
</li>
<li>
<ul class="level-2">
<li>
<ul class="level-3"></ul>
</li>
</ul>
</li>
</ul>
<ul class="level-1">
<li>
<ul class="level-2"></ul>
</li>
<li>
<ul class="level-2">
<li>
<ul class="level-3"></ul>
</li>
</ul>
</li>
</ul>
</ul>
So i do this:
var parent_ul = $('.parent');
if (parent_ul.doesExist()){
var parent_ul_lists = parent_ul.find('ul');
parent_ul_lists.each(function(){
var i;
for (i = 0; i < parent_ul_lists.length; i++) {
$(this).eq(i).addClass('level-' + i);
}
})
}
But in output i have class test level-1 for all of parent list childrens. Can anybody help?

Try this
$('.parent ul').addClass(function(){
return "level-"+$(this).parents('ul').length;
});
DEMO

Try this
var parent = $('.parent').children();
next = parent;
var i = 0;
while (next.length) {
parent = next;
parent.addClass("Level_" + i);
i++;
next = next.children();
}
Demo

You need some good 'ole recursion!
Check out this JSFiddle UPDATE: corrected jsFiddle link
Here is the code:
function labelChildUL(element, count) {
element.children().each(function (index, value) {
var $me = $(value);
if ($me.is("ul")) {
$me.addClass("level-" + (count + 1));
labelChildUL($me, count + 1);
}
else
{
labelChildUL($me, count);
}
});
}
$(document).ready(function () {
var $parent = $('#parent');
labelChildUL($parent, 0);
});
I also updated your html to use id instead of class for "parent":
<ul id='parent'>
...

You can use this;
var parent_ul = $('.parent');
var parent_ul_lists = parent_ul.find('ul');
parent_ul_lists.each(function(){
$(this).addClass('level-'+ ($(this).parents().length -1)/2);
});
See working demo here: http://jsfiddle.net/huseyinbabal/qmGcC/
Note: Inspect element in output to see class assigned

jQuery append() and data()

I have unknown number of divs with increasing ID's:
<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>
And I have another list:
<ul>
<li id="target-1" class="target"> </li>
<li id="target-2" class="target"> </li>
<li id="target-3" class="target"> </li>
<li id="target-4" class="target"> </li>
</ul>
Now, what I want to achive is grabbing data-grab URL from source-1 and append it to target-1 as a image and so forth. So finally the output list will look just like:
<ul>
<li id="target-1"><img src="someURL" /> </li>
<li id="target-2"><img src="anotherURL" /> </li>
<li id="target-3"><img src="anddifferentURL" /> </li>
<li id="target-4"><img src="andthelastoneURL" /> </li>
</ul>
I'm grabbing all the data from the first list, but I'm not sure how to append right source element to right target element?
$(document).ready(function(){
$('.target').each(function(){
var URL = jQuery(this).data('grab');
});
});

$(document).ready(function(){
$('.target').each(function(){
var $this = $(this);
var divID = "source-" + ($this.id()).split("-")[1];
$("a", $this).append('<img src="' + $(divID).data("grab") + '" />');
});
});

You can use indices to select the right elements, if you add a class to your source elements (like .source):
$(document).ready(function(){
var targets = $( '.target' );
$('.source').each(function(index, value){
$(target[index]).children("a").first().append($("<img src=" + value.data('grab') + " />"));
});
});