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;
});
});

jquery - on hover li width id - show the matching id div

<ul class="level0">
<li class="level1" id="cat2441"></li>
<li class="level1" id="cat2450"></li>
<li class="level1" id="cat2455"></li>
</ul>
<div class="alles-zwei" id="new-cat2441"></div>
<div class="alles-zwei" id="new-cat2450"></div>
<div class="alles-zwei" id="new-cat2455"></div>
Hallo, on hover the li(id) element I would like to show the matching div(id) – and hover an another li (wrong id) or leaving the ul I would like to hide the div
my approach was
jQuery('.alles li').mouseover(function() {
var cat = '"#new-' + this.id + '"';
jQuery(cat).fadeIn();
});

You were using the wrong selectors. Also '"#new-' + this.id + '"' this syntax is wrong. There is no need to add those double quotes inside the string.
jQuery('.level0 li').hover(function() {
var cat = '#new-' + this.id;
jQuery(cat).show();
}, function() {
var cat = '#new-' + this.id;
jQuery(cat).hide();
});
.alles-zwei {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="cat2441">cat2441</li>
<li class="level1" id="cat2450">cat2450</li>
<li class="level1" id="cat2455">cat2455</li>
</ul>
<div class="alles-zwei" id="new-cat2441">cat2441</div>
<div class="alles-zwei" id="new-cat2450">cat2450</div>
<div class="alles-zwei" id="new-cat2455">cat2455</div>

You could do this without having to rely on the id of the element just use the class of the two elements. When you select the class it gets returned as an array so you can match the level1 class array with the alles-zwei class array. It will also simplify your HTML code.
$('.level1').hover(function(){
// Gets the index of the current li emement.
var indx = $(this).index();
// Gets the div element based on the hovered li and hides its siblings.
$('.alles-zwei').eq(indx).show().siblings('div').hide();
});

Multiple identical forms sharing same classes

I'm a total newbie to JS/jQuery, so please, be gentle with me :).
Here is the problem i encounter on jsfiddler.net :
http://jsfiddle.net/_Arn__/n3oakxhd/2/
I have several identical forms on the same page, which sharing the same classes and the same structure, but with different numerical values.
I've make a little script to do the math (a simple addition), but when i run the script, only the values of the first form are calculated, and results displayed on other forms are the one from the first one.
Is it possible to keep the same structure and to have specific results displayed for each form ?
$( 'form' ).each(function(){
var ligne_somme_1 = parseFloat($( ".ligne_somme_1" ).text());
var ligne_somme_2 = parseFloat($( ".ligne_somme_2" ).text());
var ligne_somme_3 = parseFloat($( ".ligne_somme_3" ).text());
var total= ligne_somme_1 + ligne_somme_2 + ligne_somme_3 ;
var afficheTotal = $( ".ligne_somme_4" );
$( afficheTotal ).text( total) ;
});
<form class="Aform">
<li class="total_ligne_01 lignes">
<div class="ligne_somme_1 lignes_somme">5$</div>
</li>
<li class="total_ligne_01b lignes">
+ <div class="ligne_somme_2 lignes_somme">5$</div>
</li>
<li class="total_ligne_03 lignes">
+ <div class="ligne_somme_3 lignes_somme">5.5$</div> =
</li>
<li class="total_ligne_04 lignes">
<div class="ligne_somme_4 lignes_somme"></div>
</li>
</form>
<hr />
<form class="Aform">
<li class="total_ligne_01 lignes">
<div class="ligne_somme_1 lignes_somme">10$</div>
</li>
<li class="total_ligne_01b lignes">
+ <div class="ligne_somme_2 lignes_somme">10$</div>
</li>
<li class="total_ligne_03 lignes">
+ <div class="ligne_somme_3 lignes_somme">10$</div> =
</li>
<li class="total_ligne_04 lignes">
<div class="ligne_somme_4 lignes_somme"></div>
</li>
</form>
Thank you for reading.
Arn

You should use $(this) reference inside each to reference current form:
$('form').each(function() {
var $this = $(this); // Caching
var ligne_somme_1 = parseFloat($this.find(".ligne_somme_1").text());
var ligne_somme_2 = parseFloat($this.find(".ligne_somme_2").text());
var ligne_somme_3 = parseFloat($this.find(".ligne_somme_3").text());
var total = ligne_somme_1 + ligne_somme_2 + ligne_somme_3;
$this.find(".ligne_somme_4").text(total);
});
Demo: https://jsfiddle.net/tusharj/n3oakxhd/3/
Thanks to #plalx:
$('form').each(function() {
var $lines = $(this).find('.lignes_somme'),
total = 0;
$lines.filter(':not(:last)').each(function() {
total += parseFloat(this.textContent);
});
$lines.last().html(total);
});
Demo: https://jsfiddle.net/tusharj/n3oakxhd/4/

How to add a <br/> tag on the last word?

<ul>
<li>Menu One</li>
<li>Menu Two</li>
</ul>
How can I add a <br>tag on the last element of the a tag using jQuery making the above example as follows:
<ul>
<li>Menu <br/>One</li>
<li>Menu <br/>Two</li>
</ul>
I'm trying to use this code but it only adding a <br/> tag on the first word:
$('.navbar-default .navbar-nav > li > a').each(function() {
var html = $(this).html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$(this).html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Menu One</li>
<li>Menu Two</li>
</ul>

Seems like what you want is:
$('.navbar-default .navbar-nav > li > a').each(function() {
var html = $(this).html().split(" ");
html = html.slice(0, -1).join(" ") + " <br />" + html.pop();
$(this).html(html);
});
Which only places the <br> tag before the last word, and no other words.

You can try this approach:
$('.navbar-default .navbar-nav > li > a').html(function(html) {
var words = $(this).html().split(/\s+/);
words.splice(-1, 0, '<br>');
return words.join(' ');
});
Demo: http://jsfiddle.net/rvgfx32q/

Try this. Here is fiddle
$('ul > li > a').each(function() {
var html = $(this).html().split(" ");
//html = html[0] + "<br>" + html.slice(1).join(" ");
html = html.join("<br>");
$(this).html(html);
});

Try this
http://jsfiddle.net/wcLsm6fd/
$('ul li').each(function() {
var html = $(this).find('a').html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$(this).html(html);
});

This solution works :
$("ul > li > a").html(function(i, html) {
return html.replace(/ /g, '<br/>');
});

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') + " />"));
});
});