I am running jQuery's .each function on a button click that runs through three line items. When another object on the page is clicked one of the line items will receive a class of 'selected', it starts on the first line item as default.
I want to execute something when the data-index of the li is greater than 0 and that li has the class name of selected.
const $orderStatusButton = $('form#oar-widget-orders-and-returns-form button');
$orderStatusButton.on('click', function() {
$(".selectric-scroll ul li").each(function() {
var DataIndex = $(this).data('index');
console.log(DataIndex);
if ((DataIndex > 0) && ($(this).hasClass('selected'))) {
$('div#oar_select-error').css('display', 'none');
} else {
$('div#oar_select-error').css('display', 'block');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-index="0" class="selected"></li>
<li data-index="1" class=""></li>
<li data-index="2" class=""></li>
</ul>
Essentially, I want to hide a div when the line item with the data-index of 1 or 2 has the class name of selected and show it when the line item with the data-index of 0 has the class name selected and I'm not sure if I'm going about this correctly as it isn't working.
Since you are looping through all elements you'll always end up with the display value of the last iteration of the each function.
What you should probably be doing is using the selected class on your jquery selector:
$(".selectric-scroll ul li.selected")
then you only have to process one element on the each function.
Why not just use toggleClass("someclass") and add CSS
li.someclass {
display:none;
OR
visibility:hidden;
};
Related
I've created a navigation that highlights whatever menu item is selected by adding an 'active' class. If you click the body it removes the active class from the menu item and starts over. It works as expected except when you click a sibling on the menu. The active class is added to the newly clicked menu item, but it also remains on the old one. I wrote code that is suppose to loop through all menu items to see if any of them have the 'active' class, remove the class and then add the 'active' class to the new selection. It's not working.
What am I doing wrong? Also is there any easier way to do this? I need to solve this with vanilla Javascript. I can't use jQuery.
// html
<ul class="nav-items">
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
</ul>
// js
if (navItems) {
navItems.addEventListener("click", function(e) {
var background = document.querySelector('.background');
var callout = document.querySelectorAll('.background, .nav-close')
console.log(e.target.closest('.nav-item'));
if (background.style.display !== "block") {
background.style.display = "block";
for( let i = 0; i < e.target.closest('.nav-items').children.length; i++ ) {
console.log(e.target.closest('.nav-items'));
e.target.closest('.nav-item').classList.remove('active');
}
e.target.closest('.nav-item').classList.add('active');
if (background.style.display === "block") {
callout.forEach(function(elem) {
elem.addEventListener("click", function(event) {
background.style.display = "none";
console.log('target', e.target);
e.target.closest('.nav-item').classList.remove('active');
});
});
}
} else {
background.style.display = "none";
e.target.closest('.nav-item').classList.remove('active');
}
})
}
closest() is for ancestors not siblings. So e.target.closest('.nav-item') is only ever going to find itself as closest() finds either itself or an ancestor that matches that selector. Not any of it's sibling nav elements.
Meaning
e.target.closest('.nav-item').classList.remove('active')
Only ever tries to remove a class active from the currently clicked li.
You probably meant to use e.target.closest('.nav-items').children in your loop as a way of accessing the child li's, eg
var li = e.target.closest('.nav-items').children[i];
li.classList.remove('active');
But you don't really need a loop, unless you think you might end up with multiple active elements. You could just find the current active element by finding your closest ul element, and then from that find the nav-item that has class active, ie css class selector .nav-item.active
var parentUL = e.target.closest('.nav-items');
var current = parentUL.querySelector('.nav-item.active');
current.classList.remove('.active');
I'm trying to wrote my script for onepageweb nav. Main goal was to change selector on click and first part is working fine but first li is site logo so when I click on logo I want add .select second li. :
$(document).ready(function (){
$(".main-nav li").click(function () {
if (this = $(".main-nav li:first-of-type")) {
$(this).next().addClass("selected")
.siblings().removeClass("selected");
} else {
$(this).addClass("selected")
.siblings().removeClass("selected");
}
});
});
and this condition not work
Two problems:
You're using = for comparison (if (this = $(".main-nav li:first-of-type"))). = is always assignment. Since you can't assign to this, that's an error and nothing else will happen.
If you were using == or === there, it wouldn't work, because this will refer to a DOM element, but the return value of $() is always a jQuery object.
You may want
if ($(this).is(".main-nav li:first-of-type"))
...which uses is to test if the clicked element matches the given selector.
Side note: :first-of-type should work, but because ul elements can only contain li elements, :first would work as well.
Live Example:
$(document).ready(function() {
$(".main-nav li").click(function() {
if ($(this).is(".main-nav li:first-of-type")) {
$(this).next().addClass("selected")
.siblings().removeClass("selected");
} else {
$(this).addClass("selected")
.siblings().removeClass("selected");
}
});
});
.selected {
color: red;
}
<ul class="main-nav">
<li>The logo item</li>
<li>The second item</li>
<li>The third item</li>
<ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I have 4 images in an unordered list. Ideally I want to be able to load all the list items into an array and do a check to see which one is currently hovered.
I know using the jQuery is() function I can check which is in an :hover state. How would I apply this check to all items within that list array?
<ul class="image-list">
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
</ul>
Thanks for any help.
DIM3NSION
Use the mouseover() function:
// Add mouseover event to all your image-items
$('.image-list > .image-item').mouseover(function() {
// $(this) is your hovered image-item object
alert($(this).find('img').attr('src'));
});
Working jsfiddle
Demo: http://jsfiddle.net/GCu2D/758/
JS:
$(function () {
var li = $("ul li"); //get all li. All li are stored in an array.
$(document).on("mouseover", "ul li.image-item", function (e) {
var ele = $(this); //get currently hovered li.
var item = li.index(ele); //get the index of the currently hovered li in that array
console.log(item); //this logs the index. Using this index, do whatever you want with that item.
});
});
I have a list of elements where i want to show max 5 elements and add show more button if total elements is more than 5. Show/Hide part is done but I am stuck to customize this list using jquery.
For Example here is a list of brands which having total 13 items.
<ul class="search-filter" id="attributeLevel1Facet">
<li>brand1</li>
<li>brand2</li>
<li>brand3</li>
<li>brand4</li>
<li>brand5</li>
<li>brand6</li>
<li>brand7</li>
<li>brand8</li>
<li>brand9</li>
<li>brand10</li>
<li>brand11</li>
<li>brand12</li>
<li>brand13</li>
</ul>
I want to make this list like this using jquery only if total item is more than 5
<ul class="search-filter" id="attributeLevel1Facet">
<li>brand1</li>
<li>brand2</li>
<li>brand3</li>
<li>brand4</li>
<li>brand5</li>
<li class="search-opt hide">
<ul class="search-opt">
<li>brand6</li>
<li>brand7</li>
<li>brand8</li>
<li>brand9</li>
<li>brand10</li>
<li>brand11</li>
<li>brand12</li>
<li>brand13</li>
</ul>
</li>
</ul>
<c:if test="${fn:length(***) gt 5}">
<a data-role="more-options" class="more-option" title="more-option">More Options</a>
</c:if>
I want to change the first list to second list using jquery if items > 5. If $("#attributeLevel1Facet > li").length > 5 then it should wrap it with another <ul><li> element and add more-option button (second list above).
Please help me.
You can use something like this,
$("#attributeLevel1Facet > li").filter(function() {
return $(this).index() > 4;
}).wrapAll("<li class='search-opt hide'><ul class='search-opt'></ul></li>");
Fiddle
In the above code, filter will return the li elements whose index is greater than 4. Then you can wrap them with any elements.
You can check the length of the li elements and then create a new ul like
var $lis = $('#attributeLevel1Facet li');
if ($lis.length > 5) {
var $ul = $('<ul class="search-opt"/>').append($lis.slice(5));
$ul.wrap('<li class="search-opt hide" />').parent().appendTo('#attributeLevel1Facet')
}
Demo: Fiddle
Check this -> jQuery load first 3 elements, click "load more" to display next 5 elements
From the answer i think you can get what you want
You can try something like this
if($('li').length > 5){
var element='<li class="search-opt hide">'+
'<ul class="search-opt">';
$('li:nth-child(5)').after(element)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class="search-filter" id="attributeLevel1Facet">
<li>brand1</li>
<li>brand2</li>
<li>brand3</li>
<li>brand4</li>
<li>brand5</li>
<li>brand6</li>
<li>brand7</li>
<li>brand8</li>
<li>brand9</li>
<li>brand10</li>
<li>brand11</li>
<li>brand12</li>
<li>brand13</li>
</ul>
I want to get the values of items in a Dynamically generated DOM using DOMNodeInserted.
Here is my code.The items #I want to get the values are li eg
<div id="demo">
<ul>
<li class="req">Chemistry</li>
<li class="req">English</li>
<li class="req">Maths</li>
</ul>
</div>
Here is the code
$('#demo').on('DOMNodeInserted', function(e) {
var that = $(this);
if ($(e.target).is('.req')) {
alert(oneoftheitemsintheli);
}
});
I want to get on of the items in the li eg Maths, Chemistry etc. I need to know how to get the items.
Thanks
Given that each li has the class req, you can use each to iterate over them and get the text value - or any other property you need.
$('#demo').on('DOMNodeInserted', function(e) {
$('.req').each(function() {
alert($(this).text());
});
});
Example fiddle