Conditionally add class to specific elements - javascript

I am trying to write an if statement to check if the html of an LI element matches a variable, and if it does, adding a class to that specific li.
My HTML:
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
What I've tried so far:
var x = "Three";
if($('li').html() == x) {
$(this).addClass("active");
}
Desired result:
<li>One</li>
<li>Two</li>
<li class="active">Three</li>
<li>Four</li>

I think you would want to use the filter method:
var x = "Three";
$( "li" ).filter(function( index ) {
return $(this).html() == x;
}).addClass("active");

You can also use .each()
var x = "Three";
$('li').each(function() {
if($(this).html() == x) {
$(this).addClass("active");
}
});
fiddle

You need to use the filter method :
var x = "Three";
$('li').filter(function(){
return $.trim(this.innerHTML) == x;
}).addClass('active')

Here is one way -
var x = "Three";
$('li').each(function() {
if( $(this).is(':contains("' + x + '")')) {
$(this).addClass('active');
}
});

Try this
JSFIDDLE
var x = "Three";
$('li').each(function(i,elem){
if($(elem).text() == x) {
$(this).addClass("active");
}
});

Related

Add class to list item alternately using JavaScript

I want to add an alternate class visible after 2 seconds to each element starting from 0 index. (like 0, 1, 2, 3, ... until the end).
When it comes to the last element, then add class to backwards like (10, 9, 8, ... until 0), so when on 0 again, forward and backward like an infinite loop. Thanks in advance for your help.
$(function() {
iterate();
function iterate() {
var i = 0;
var plus = setInterval(function() {
i++;
if (i == 10) {
clearInterval(plus);
}
}, 1000);
var minus = setInterval(function() {
i--;
if (i == 0) {
clearInterval(minus); // again start plus interval
}
});
$('li').removeClass('visible');
$('li').eq(i).addClass('visible');
}
});
.visible {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ol>
<li class="visible">One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
Try this: try below code where you can put logic to save current index and add / remove classes with setInterval function
$(function () {
var i = $("ol li").length;
var j =0;
var down = true;
setInterval(function(){
if(i==j || j<0) {
down = !down;
if(j<0) {
j=0;
}
}
if(down) {
$("ol li").eq(j).addClass("visible");
j++;
} else {
$("ol li").eq(j).removeClass("visible");
j--;
}
}, 2000);
});
.visible {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>

jQuery load first 3 elements for multiple ul lists

This question has been asked long ago and answered as well here jQuery load first 3 elements, click “load more” to display next 5 elements, but that was for only one ul element.
However, I want to know how to do the same thing for multiple elements say I have this instead:
<ul id="myList"></ul>
<ul id="myList1"></ul>
<ul id="myList2"></ul>
how do I make the javascript for multiple elements in this case??
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').show();
$('#showLess').show();
if(x == size_li){
$('#loadMore').hide();
}
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
$('#loadMore').show();
$('#showLess').show();
if(x == 3){
$('#showLess').hide();
}
});
});
any idea how to do that??
Thanks
Update#1:
This is my other code part for showmore and showless
<div id="loadMore">Load more</div><div id="showLess">show Less</div>
Update#2
what if classes used instead of ids, would that make it easier?? like this:
<ul class="myList"></ul>
<ul class="myList"></ul>
<ul class="myList"></ul>
and each showmore/Less can control one of them. so one to one... is that possible???
You can change your code by using classes instead of ids and a wrapping div; than change accordingly the logic by using element nesting.
Instead of use a variable you can use a HTML attribute to store the current number of showed li for each ul.
Code:
$(document).ready(function () {
$(".wrapper").each(function (index) {
$(this).find('.myList li:lt(' + $(this).attr('viewChild') + ')').show();
});
$('.loadMore').click(function () {
var $myWrapper= $(this).closest('.wrapper');
var x= parseInt($myWrapper.attr('viewChild'),10);
var liSize=$myWrapper.find('.myList li').size();
x = (x + 5 <= liSize) ? x + 5 : liSize;
$myWrapper.attr('viewChild',x)
$myWrapper.find('.myList li:lt(' + x + ')').show();
$myWrapper.find('.showLess').show();
if (x == liSize) {
$myWrapper.find('.loadMore').hide();
}
});
$('.showLess').click(function () {
var $myWrapper= $(this).closest('.wrapper');
var x= $myWrapper.attr('viewChild')
x = (x - 5 < 0) ? 3 : x - 5;
$myWrapper.attr('viewChild',x)
$myWrapper.find('.myList li').not(':lt(' + x + ')').hide();
$myWrapper.find('.loadMore').show();
$myWrapper.find('.showLess').show();
if (x == 3) {
$myWrapper.find('.showLess').hide();
}
});
});
Demo: http://jsfiddle.net/9gxBT/

menu traversing on next and prev button click

can any one optimize this code i am new to jquery .
i want add class on next and previous button click.any way i wrote this code it's working for me but if any one optimize this code using jquery predefined methods .then it will more helpful..
Thanks in advance
$(document).ready(function () {
var length = $('#slides li').size() - 1;
var curren = 0;
console.log(length);
$('.next').on('click', function () {
if (curren >= 0 && curren < length) {
curren++;
$('.selected').removeClass('selected');
$('#slides li:eq(' + curren + ')').addClass('selected');
}
});
$('.prev').on('click', function () {
if (curren >= 1) {
curren--;
$('.selected').removeClass('selected');
$('#slides li:eq(' + curren + ')').addClass('selected');
}
});
});
my html code
<ul id="slides">
<li class="selected">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>five</li>
<li>six</li>
</ul>
You should have a look at $.next and $.prev.
Your code can easily be altered into something along these lines:
$(".next").on("click", function() {
var selected = $("#slides li.selected");
var next = selected.next();
if(next.length){next.addClass("selected");selected.removeClass("selected");}
});
$(".prev").on("click", function() {
var selected = $("#slides li.selected");
var prev = selected.prev();
if(prev.length){prev.addClass("selected");selected.removeClass("selected");}
});
Example can be found here: jsbin

How to add an attribute and remove the attribute with an onchange event?

I have multiple selects and would like to add or remove a name attribute depending on the option that is chosen in the first select.
Here is a fiddle for an example:
http://jsfiddle.net/Nirvanachain/DZFFe/
You just had a few things backwards and you forgot the '.' in the class selector: $('.class'). I fixed the fiddle: http://jsfiddle.net/DZFFe/7/
$("#mySelect").change(function() {
$(".selectorClass").removeAttr("name");
var x = document.getElementById("mySelect").value;
if($("#" + x)) {
$("#" + x).attr("name", "myName");
}
});
​
This should work:
$("#mySelect").change(function() {
var x = $(this).val();
if ($("#" + x).length > 0) {
$("#" + x).attr("name", "myName");
} else {
$(".selectorClass").removeAttr("name");
}
});​
Something like the following?
$("#mySelect").change(function() {
$('.selectorClass').removeAttr('name');
$('#' + $(this).val()).attr('name', 'myName');
});
​
http://jsfiddle.net/DZFFe/8/
there were problems when !!x === false (ex: empty string in this case). I added a simple check on the if
I also added a missing . to select by class
$("#mySelect").change(function() {
var x = document.getElementById("mySelect").value;
if(x && $("#" + x)) { //added to check if x != ""
$("#" + x).attr("name", "myName");
} else {
$(".selectorClass").removeAttr("name"); //added missing "." to actually select classes
}
});
Here is a jsFiddle

How do I fade in a div by id if cookie=1?

I have a page with few tabs.
I am looking for a way that if you select tab 5 and cookie = 1 then show tab6 otherwise show tab5.
The code for the tabs is:
jQuery(".tabs a").click(function () {
stringref = jQuery(this).attr("href").split('#')[1];
jQuery('.tab_content:not(#' + stringref + ')').hide();
jQuery('.tab_content#' + stringref).fadeIn();
return false;
});
I want the tab number 5, if clicked and cookie=1 to show tab6.
The code that shows the div5 or Div6 if cookie is 1 or null is:
alreadyClosed = $.cookie(stateCookieName);
if (alreadyClosed != 1) {
$DIV5.show();
$DIV6.hide();
} else {
$DIV5.hide();
$DIV6.show();
}
How do I add them together? I assume their should be a way to say:
If tab1.click and cookie = 1 then show $div1
else tab1.click and cookie = null then show $div2
The body looks like:
<!-- buttons -->
<ul id="boxes" class="tabs">
<li>Div 5</li>
<li>Div 6</li>
</ul>
<!-- content -->
<div class="tab_content" id="Div5">DIV 5</div>
<div class="tab_content" id="Div6">DIV 6</div>
I hope you guys can help me.
Thanks alot & Regards,
rallyboy.
jQuery(".tabs a").click(function () {
alreadyClosed = $.cookie(stateCookieName);
stringref = jQuery(this).attr("href").split('#')[1];
if(alreadyClosed == 1)
{
newstring = stringref;
if(stringref == "5")
{
newstring = "6";
}
elseif(stringref == "6")
{
newstring = "5";
}
stringref = newstring;
}
jQuery('.tab_content:not(#' + stringref + ')').hide();
jQuery('.tab_content#' + stringref).fadeIn();
return false;
});
This extra code does a quick check - if the cookie is set, it toggles 5 to 6 or 6 to 5. Then it proceeds as normal.
Do you need a more general solution than this for tabs 5 and 6? If so, can you please lay out some rules for how exactly it should work?
jQuery(".tabs a").click(function () {
stringref = jQuery(this).attr("href").split('#')[1];
// Normal navigation
if(stringref != 'div5') {
jQuery('.tab_content:not(#' + stringref + ')').hide();
jQuery('.tab_content#' + stringref).fadeIn();
} else {
// 5 is special, do further checking
var alreadyClosed = $.cookie(stateCookieName);
if (alreadyClosed != 1) {
$('div5').show();
$('div6').hide();
} else {
$('div5').hide();
$('div6').show();
}
}
return false;
});
After so long I found it out finally. I replaced this click function with this:
var alreadyClosed = $.cookie(stateCookieName) == '1';
jQuery('ul.tabs a').click(function () {
var ref = jQuery(this).attr('href').split('#')[1];
if (alreadyClosed && ref == 'Div5') {
ref = 'Div6';
}
jQuery('div.tab_content:not(#' + ref + ')').hide();
jQuery('#' + ref).fadeIn();
return false;
});

Categories