Get previous and next list item id if has? - javascript

I stuck on a point and need your some help friends. I need previous and next list. For example i have three li in a ul and this second one is active. Now i have to get previous and next li id. and if first li is active the don't do any thing also if last li then don't do any thing.
<ul>
<li id="1">First <span class="testId">14</span></li>
<li id="2" class="active">Second <span class="testId">15</span></li>
<li id="3">Third <span class="testId">16</span></li>
</ul>
Jquery code i try but did not understand how to do this
if(){
alert('good');
/*var PrevTestId = $(this).prev('li').find('.testId').text();
var thisId = $(this).next().find('.testId').text();
alert(PrevTestId +" , "+ thisId);*/
}
if($(this).index() > 0){
var PrevTestId = $(this).prev('li').find('.testId').text();
var thisId = $(this).next().find('.testId').text();
alert(PrevTestId +" , "+ thisId);
}

Here you go with the solution https://jsfiddle.net/1aL33df4/
$('li').hover(function(){
if( typeof $(this).prev().attr('id') != 'undefined')
console.log("Previous Element ID: " + $(this).prev().attr('id'));
if( typeof $(this).next().attr('id') != 'undefined')
console.log("Next Element ID: " + $(this).next().attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="1">First <span class="testId">14</span></li>
<li id="2" class="active">Second <span class="testId">15</span></li>
<li id="3">Third <span class="testId">16</span></li>
</ul>

Use .next() or .prev() to get respective li
use .attr() to get the id
use hasClass() to test if li has active class
var pliid = $("ul li.active").prev('li').attr('id');
var nliid = $("ul li.active").next('li').attr('id');
console.log("prev li id is " + pliid)
console.log("prev li is active " + $("ul li.active").prev('li').hasClass('active'))
console.log("prev li textid text " + $("ul li.active").prev('li').find('.testId').text())
console.log("next li id is " + nliid)
console.log("next li is active " + $("ul li.active").next('li').hasClass('active'))
console.log("next li textid text " + $("ul li.active").next('li').find('.testId').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="1">First <span class="testId">14</span></li>
<li id="2" class="active">Second <span class="testId">15</span></li>
<li id="3">Third <span class="testId">16</span></li>
</ul>

Related

Jquery how to get ID and Title

Hello I have a UL and LI it working with function click but if get the title it not work.
Exemple:
// it work but not get title
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = ///??? how to get title h2 selector
//alert(get_id);
console.log($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
You need to select the h2 element then get the text using text() like :
var get_title = $(this).find('h2').text();
As #ParthShah suggested you could use a global class like title_content on your title elements, so you could target it easily using class selector :
var get_title = $(this).find('.title_content').text();
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find('.title_content').text();
console.log(get_id + ' - ' + get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID"><h2 class="title_content">Title</h2> First One </li>
<li id="myID2"><h2 class="title_content">Title 2</h2> Two </li>
<li id="myID4"><h3 class="title_content">Title 3</h3> Tree </li>
</ul>
Use :header. No need to worry for any h1,h2,h3... tag.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find(":header").text();
console.log(get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
</div>
use jQuery's find to query within your element.
var get_title = $(this).find("h2,h3").text() //add h4,h5 etc if you need to find those too.
https://jsfiddle.net/povu503s/
$(this).children().html();
Will take the first child and grab the HTML inside
The title is a children of your targeted li. Use the .children() function to target that heading.
Hope this helps :>
// it work but not get title
$("#list li").on('click',function(){
var get_id = $(this).attr('id');
var get_title = $(this).children().text();
alert(get_title)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list" >
<li id="myID" > <h2>Title</h2> First One </li>
<li id="myID2" > <h2>Title 2</h2> Two </li>
<li id="myID4" > <h3>Title 3</h3> Tree </li>
</ul>
give class like "title_content" to your h2 and h3 tag and then fetch title by class name.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(".title_content", this).text();
console.log(get_id + ' - ' + get_title);
});
Please Refer below Fiddle..
Fiddle
You can use any of below
1. var get_title = $(this).find(':header').text();
2. var get_title = $(this).children().text();

With .each() iterate through a list and create select options with the li's text

I'm trying to iterate through a list, get the text of it's items and create and then inside a select, create an option with each of the list items
text, but I just get the last one.
$(".categories ul li a").each(function(i){
console.log($(this).text());
$(".filters-select").html("<option value=." + $(this).text() + ">" + $(this).text() + "</option>" );
})
Why does the console log works and outputs the 4 items that I have, but it's not creating 4 option tags and just one?
The HTML structure looks like this:
<li class="categories">Categorías
<ul>
<li class="cat-item cat-item-4">novedades
</li>
<li class="cat-item cat-item-2">Nueva
</li>
<li class="cat-item cat-item-5">Otros
</li>
<li class="cat-item cat-item-1">Sin categoría
</li>
</ul></li>
You should use .append() and not .html() since html will override everytime its called.
$(".filters-select").append("<option value=." + $(this).text() + ">" + $(this).text() + "</option>");
Demo
$(".categories ul li a").each(function(i) {
console.log($(this).text());
$(".filters-select").append("<option value=." + $(this).text() + ">" + $(this).text() + "</option>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="categories">Categorías
<ul>
<li class="cat-item cat-item-4">novedades
</li>
<li class="cat-item cat-item-2">Nueva
</li>
<li class="cat-item cat-item-5">Otros
</li>
<li class="cat-item cat-item-1">Sin categoría
</li>
</ul>
</li>
<select class="filters-select"></select>
If you use html() this is what happen for EACH loop:
You get the data you want
You create your option
You change the HTML of ".filter-select" by the current option
So each loop you delete the previous.
This is an other solution than using append() you can use I think:
var option_content = ""; // I create an empty var
$(".categories ul li a").each(function(i){
option_content += "<option value=." + $(this).text() + ">" + $(this).text() + "</option>";
});
$(".filters-select").html(option_content);
You build your data for each loop, then you add it in your "filter-select" element.
Hope it helps

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

Change html position with jQuery

I'm trying to change the position of some list with jQuery in function of an array
http://jsfiddle.net/6r5jp5Lk/9/
$('div').each(function() {
var answer = JSON.parse('[' + $(this).find('.order').val() + ']'),
list = $(this).find('ul');
$.each(answer, function(index, value) {
list.append($('li[data-order="' + value + '"]'));
});
});
Why the content is appending twice?
Change your div to .list and it works fine
$('.list').each(function() {
var answer = JSON.parse('[' + $(this).find('.order').val() + ']'),
list = $(this).find('ul');
$.each(answer, function(index, value) {
list.append($('li[data-order="' + value + '"]'));
});
});
You are not closing your div tags, if you check you have 4 div tags. Check the updated jsfiddle.
<div>
<ul class="list">
<li data-order="1">1</li>
<li data-order="2">2</li>
<li data-order="3">3</li>
<li data-order="4">4</li>
<input class="order" type="hidden" value="4,2,1,3" />
</ul>
</div>
<div>
<ul class="list">
<li data-order="1">1</li>
<li data-order="2">2</li>
<li data-order="3">3</li>
<li data-order="4">4</li>
<input class="order" type="hidden" value="3,2,4,1" />
</ul>
</div>
http://jsfiddle.net/6r5jp5Lk/16/
I fixed http://jsfiddle.net/6r5jp5Lk/15/
$('.list').each(function() {
var answer = $(this).find('.order').val().split(','),
list = $(this);
$.each(answer, function(index, value) {
list.append($('li[data-order="' + value + '"]', list));
});
});

Categories