Make Javascript function ignores the last li to submit form - javascript

I have the following html code:
<div class="ranges">
<ul>
<li>Op 1</li>
<li>Op 2</li>
<li>Op 3</li>
<li>Op 4</li>
<li>Op 5</li>
<li>Op 6</li>
<li>Op 7</li>
</ul>
I need to submit a form on the click of op 1, op 2, op 3, op 4, op 5, op 6. In other word, the last li, cant submit the form.
`In this the code Im trying to make this happen:
gData.on('click', '.ranges ul li', function(e){
gFilter.find('form').submit();
});
But this .ranges ul li, will get all the li. How Can I make it ignore the last one?


You can use combination of :not() and :last
gData.on('click', '.ranges ul li:not(:last)', function(e){
gFilter.find('form').submit();
});
$('body').on('click', '.ranges ul li:not(:last)', function(e){
alert('clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ranges">
<ul>
<li>Op 1</li>
<li>Op 2</li>
<li>Op 3</li>
<li>Op 4</li>
<li>Op 5</li>
<li>Op 6</li>
<li>Op 7</li>
</ul>


This should work:
gData.on('click', '.ranges ul li:not(:last-child)', function(e){
gFilter.find('form').submit();
});


You can use the :not(:last)function in jQuery.
gData.on('click', '.ranges ul li:not(:last)', function(e){
gFilter.find('form').submit();
});


Use:
gData.on('click', '.ranges ul li', function(e){
if ( !$(this).is(':last-child') ) { //if this is not last child
gFilter.find('form').submit(); //execute submit
}
});

Related

How to add class to all li but not to clicked li using jquery

I want to add a hidden class to all li but not to the li which was clicked. How can I do this using jQuery?
<ul class="render-menu">
<li class="font-size">list 1</li>
<li class="font-size">list 2</li>
<li class="font-size">list 3</li>
<li class="font-size">list 4</li>
</ul>
jQuery(".render_menu li").on('click', function() {
alert();
jQuery(".render_menu").not($(this)).parent().addClass('hidden');
});

Firstly note that your class in the HTML is render-menu, yet the JS was using render_menu. You need to make them consistent.
With regard to the issue, you're adding the class to the parent() of the li, ie. the ul, so all the child elements are being affected by the class. To fix this, use siblings() to get all the li elements you require before calling addClass(). Try this:
$(".render-menu li").on('click', function() {
$(this).siblings().addClass('hidden');
});
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="render-menu">
<li class="font-size">list 1</li>
<li class="font-size">list 2</li>
<li class="font-size">list 3</li>
<li class="font-size">list 4</li>
</ul>

Change your JS code to below
jQuery(".render_menu li").on('click', function () {
alert();
jQuery(".render_menu li").not($(this)).addClass('hidden');
});
You are comparing ul instead of li to add class

You can try the following
$('.render-menu li').on('click',function(){
$('.render-menu li').removeClass('hidden').not(this).addClass('hidden');
});
.hidden{
color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="render-menu">
<li class="font-size">list 1</li>
<li class="font-size">list 2</li>
<li class="font-size">list 3</li>
<li class="font-size">list 4</li>
</ul>

hiding list items and show new li on click, but now I always need to have an empty li to "hide" them all

I've got a script that checks an li list and will show the first, with every click it will show the next li.
The problem is with this script, I have to add an empty li to "hide" all of them, is there a way to work around this, with this script?
$('#test-div2 ul li').hide().filter(':lt(1)').show();
$('#hint-1').click(function(){
$eL = $('#test-div2 ul li').filter(":visible");
$("#test-div2 ul").find("#test-div2 ul li").hide().next().show();
if($eL.next().length>0){
$eL.next().show();
}
});
This is the html:
<ul>
<li></li>
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>

How about just making the container div the thing to click to get a hint and cleaning up your JQuery a bit?
$('#hints li').hide();
$('#test-div2').click(function(){
$eL = $('#hints li').filter(":visible");
$("#hints li:first-child").show();
if($eL.next().length > 0){
$eL.next().show();
}
});
#test-div2 {
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hints">
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>
<div id="test-div2">Show hint</div>

is it possible, to add auto incremental classes to a list by using jquery or javascript

is it possible, to add auto incremental classes to a list
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Now, If I hover on Element 3 then, add auto incremental classes to li like example below...
<ul id="list">
<li class="left2">Element 1</li>
<li class="left1">Element 2</li>
<li>Element 3</li>
<li class="right1">Element 4</li>
<li class="right2">Element 5</li>
</ul>
Again if hover on Element 1 then, add auto incremental classes to li like example below...
<ul id="list">
<li>Element 1</li>
<li class="right1">Element 2</li>
<li class="right2">Element 3</li>
<li class="right3">Element 4</li>
<li class="right4">Element 5</li>
</ul>
sorry about my poor English. Thank you.

$('li').hover(function() {
$('li').removeClass();
var next = $(this).nextAll();
next.each(function(i, v) {
$(this).addClass('right' + (i+1))
})
var prev = $(this).prevAll();
prev.each(function(i, v) {
$(this).addClass('left' + (i+1))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Use .prevAll() and .nextAll()
Description: Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
then iterate on the li and assign the index. make sure to remove the li classes so it wont stack up

Based on example, I cleared all the class in <li> when mouseenter anyone of the <li> and add new class for them.
left1+n will add to previous all <li> and right1+n will add to next all <li>
$("#list > li").on("mouseenter", function(){
$("#list > li").attr("class", "");
$(this).prevAll("li").each(function(i) {
$(this).addClass('left' + (i+1));
});
$(this).nextAll("li").each(function(i) {
$(this).addClass('right' + (i+1));
});
});

Looping through .find() results and gathering .text()

I've got the following code:
jQuery
$("li").click(function(){
$(this).toggleClass("selected");
$(".selected").each(function(){
$(".items").append(this.text() + ", ");
});
});
html
<ul class='category'>
<h4>Category</h4>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<span class="items">Selected Items Appear Here</span>
I'm trying to search the contents of the $(".category") for tags with the .selected class before appending the results to another div.
This is the result I'm hoping for:
<span class="items">Link 1, Link 4, Link 5</span>
However, the this.text() seems to be returning an undefined error.
Any clue as to what I'm doing wrong?

You need to call .text() on a jQuery object, and since this refers to the element (see jQuery docs for .each()), simply wrap this in $() to make a new jQuery object of the current element in the loop.
example:
$(".items").append($(this).text() + ", ");
in saying this, you'd probably be better off simply using .innerHTML unless you want the jQuery object for other reasons.
example:
$(".items").append(this.innerHTML + ", ");

You can try something like
var $lis = $(".category li").click(function() {
//toggle the current li's selected class
$(this).toggleClass("selected");
setItems();
});
//set the initial value
setItems();
function setItems() {
//get the texts of all selected `li`'s text to an array
var texts = $lis.filter(".selected").map(function() {
return $(this).text();
}).get();
//set the array values to the `.items` element
$('.items').text(texts.join())
}
.selected {
background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Category</h4>
<ul class='category'>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<span class="items">Selected Items Appear Here</span>

js fiddle example for you
**Jquery**
$(function () {
$("li").click(function () {
$(this).toggleClass("selected");
appendItems();
});
function appendItems() {
var selecteditem = "", lement, appementElement = ", ";
lement = $(".selected").size();
$(".selected").each(function (index) {
if ((lement - 1) == index) {
appementElement = "";
}
selecteditem = selecteditem + ($(this).text() + appementElement);
});
$(".items").html("").append(selecteditem);
}
});
html
<ul class='category'>
<h4>
Category</h4>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<h3>
<span class="items"></span>
</h3>
i hope this may hep you

I think you confused Javascript's this with jQuery's $(this). $() is the jQuery constructor function. this is a reference to the DOM element of invocation.
Please find the working code below:
$("li").click(function(){
$(this).toggleClass("selected");
$(".selected").each(function(){
$(".items").append($(this).text() + ", ");
});
});
$(".selected").each(function(){
$(".items").append($(this).text() + ", ");
});
.selected{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='category'>
<h4>Category</h4>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<span class="items">Selected Items Appear Here</span>
Read up on this: jQuery $(this) vs Javascript this

Jquery Slidetoggle, how to allow to show only one element?

This is my html:
<ul>
<li>
List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
<li>
List 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
And this js:
$('ul li ul').hide();
$('ul li').click(function() {
$(this).children().slideToggle();
});
I want to create slidetoggle, for example: when user click "List" and after open this user click List 2 then list one is hiding.
DEMO: http://jsfiddle.net/7dxAb/
I want only one open when user click.
Thanks!

Try this:
$('ul li ul').hide();
$('ul li').click(function() {
var _this = $(this);
_this.children().slideToggle();
$('ul > li').not(_this).children('ul').slideUp();
});
You hide "ul"s in all ListN elements except one that is clicked.

You can slideUp() all the other ul's before the slideToggle() like this:
$('ul li').click(function() {
$(this).parent().find('ul').slideUp();
$(this).children().slideToggle();
});
I'm not sure if this is the most effecient way tho.

Add
$('ul li ul').slideUp();
to the click event. This will hide the other uls.
The finished code would look like:
$('ul li ul').hide();
$('ul li').click(function() {
$('ul li ul').slideUp();
$(this).children().slideToggle();
});
http://jsfiddle.net/yvPFx/2/
Edit: You can use a class to keep track of what is showing.
http://jsfiddle.net/yvPFx/3/

Try this:
$('ul li ul').hide();
$("ul li").click(function () {
$(this).children().slideToggle("slow", function() {
//
});
$(this).siblings().children().slideUp("slow");
});

Categories

Resources