Get the next element by selecting element with a class - javascript

I have a live search and a list element is given a class of hover I am then trying to get the next li element after the hover class upon pressing the down arrow and adding the hover class to that element. Here is what I have:
if(e.keyCode == 40){
var current = results.find('li.hover');
current.removeClass();
current.parent().next('li').addClass('hover');
return false;
}
It just will not add a class to the next element. It finds the current class just fine. Not sure what I am doing wrong. Appreciate it!

Use e.which, not e.keyCode. jQuery normalizes the property (IE doesn't support e.keyCode):
if(e.which == 40){
As for your selector, try this:
results.find('li.hover').removeClass().next('li').addClass('hover')
.next() looks for the next sibling matching the selector, so there is no need to call .parent().

You are looking for the LI.hover, after that you go to the parent (which is the UL) and then select the next LI after the UL.
Change this:
current.parent().next('li').addClass('hover');
To:
current.next('li').addClass('hover');

current.parent().next('li') is probably not doing what you want.
Since current is a jQuery object of li tags, I assume that it's parent is a ul tag. If that's the case, then next('li') is looking for a first sibling of the ul tag that's an li tag which it will never find.
It's unclear to me which li you want to add the hover class to so I'm not sure exactly what to recommend to do what you want.

Do not you just want to do that :
if(e.keyCode == 40){
var current = results.find('li.hover');
current.removeClass();
current.next('li').addClass('hover');
return false;
}
without parent() ?

current.nextSibling should refer to the next li element in the list

Related

Add class to previous element using jquery

I am adding classes namely hide_some_features,show_some_features in each loop. Now i want to add class to feature_suffix having next only hide_some_features class. I tried with $(this).closest('.feature_suffix').addClass('test-class'); which is not working.
$('.variations_form input:radio[name=attribute_pa_1]').each(function() {
if (jQuery.inArray($(this).attr('data-feature-value'), disabledFetaureValue) < 0) {
$(this).closest('.cc-selector').addClass('hide_some_features');
$(this).closest('.feature_suffix').addClass('test-class');
} else {
$(this).closest('.cc-selector').addClass('show_some_features');
}
})
;
I want to add class to highlighted place
.closest() wont work here because the target element is not an ancestor of the element that fires the event. Use the below:
$(this).closest('.cc-selector').prev('.feature_suffix').addClass('test-class');
You can find the closest cc-selector, then see whether it has hide_some_features, if so then add the new class to its previous sibling
$(this).closest('.cc-selector').filter('.hide_some_features').prev('.feature_suffix').addClass('test-class');

Why is this attribute based selector giving error in jQuery?

alert($("div#keylist ul li").filter("[display=block]").first().position().top);
I do have a div with id as keylist and there is an unordered list in it. I want .position().top of first visible element.
Actualy [display=block] is not a right selector
use :visible selector instead
alert($("div#keylist ul li:visible").first().position().top);
I think this is what you need
alert($('ul > li').filter(function(){
return $(this).css('display') == 'block';
}).first().text());
Demo
As mentioned inn the previous answers [display=block] is not a selector. But if you still insist on selecting li elements which has this css property you can go by class
Here are few way you can achieve the same
// Using Filter
alert("Using Filter " +$("div#keylist ul li").filter(".blockDec").first().position().top);
Since you already have parent as div#keylist you can use find() rather than using filter()
Here is difference between filter & find
Also you can take a look Here & Here to optimized the selector
//Using find .Here it will find all child element of ul
alert("Using Find " +$("div#keylist ul").find(".blockDec").first().position().top);
//Optimizing the jQuery selector
alert("Optimized " +$("#keylist").find(".blockDec:first").position().top);
JSFIDDLE

Check if list element is visible (jquery.visible)

I'm trying to check if each element of an ul list is visible using the jquery.visible plugin. The problem is that the script does not handle each "li" element as independent, so putting this:
var element = $("ul li");
if (element.visible(true)) {
element.removeClass("hidden");
}
Removes the "hidden" class of all elements at the same time.
Any ideas?
You are initializing element as an array, so the name is misleading, and it may be throwing you off later in the code.
You want something like this (untested):
var arrElements = $("ul li");
arrElements.each(function() {
if ($(this).visible(true)) {
$(this).removeClass("hidden");
}
});
Note that I am using the each method and $(this) to act on only one li element at a time.
How about checking just the css property:
if(element.css('display') != 'none')

Change current li class (the one who is clicked)

I have many li(list) items which are generated by a loop thanks to java servlets, now
I want to change the class of the current li(list) which is selected
$('li.doBlokkeer').click(function(e) {
$('.doBlokkeer').addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
so if a current li is selected its class need to be changed (it needs to have doDEBlokkeer).
The above code works.. but it changes ALL my li items... so guys do you know how to change the class of the current item $(this) ? I have no jquery skill, pls help me out. Thanks!!
You need to use $(this) instead of $('.doBlokkeer') in the click event handler. As $('.doBlokkeer') will return all the elements having class doBlokkeer where as $(this) represents the jQuery object that is source of the event.
Live Demo
$('li.doBlokkeer').click(function(e) {
$(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
You can also try using toggleClass to switch between two classes.
Live Demmo
$('li.doBlokkeer').click(function(e) {
$(this).toggleClass('doDEBlokkeer');
});

jQuery Siblings Not Working?

I have created a Responsive Sub-Menu for a Responsive Website that actives at equal to or less than 768px. I have it set up to where jQuery removes the link for the Parent List Item and displays the sub-menu onClick.
The problem is, there is a Parent that has no children and I am trying to only remove the link(href) of Parent Elements that do have children. But, I even applied it in an If statement so it wouldn't remove the parent link if it has no children, that didn't work. So I tried siblings, which I thought would make more sense. But it is still not behaving as so.
Here is my jQuery for this:
if (jQuery(".navigation > ul > li > a").siblings("ul")){
jQuery(".navigation > ul > li > a").removeAttr("href");
};
You may see an example here: http://stlredtails.com/construction/
Edit: The Contact link is the link that has no "ul" children, practical terms, there is no sub-menu.
Thank you!
your if statement always returns true and your following command removes the href attribute from all matched elements. you will need to loop through the matching anchors and process an if statement for each one.
jQuery(".navigation > ul > li > a").each( function() {
if(jQuery(this).siblings("ul").length) {
jQuery(this).removeAttr("href");
}
});
I'm not exactly sure if I understand what you are asking, but it sounds like you may be in need of jQuery's :empty and/or :parent selectors.
Try something like:
$(".navigation > ul:parent > li > a")
jQuery :empty documentation
jQuery :parent documentation
jQuery Siblings Not Working?
It is working. Yet it always evaluates to a jQuery wrapper object even if it matched nothing, and that value is truthy so your if-block always executes. Check for the .length-property to be not 0.
I have it set up to where jQuery removes the link for the Parent List Item and displays the sub-menu onClick.
There is absolutely no reason to remove the href attribute. To prevent following the link even if you clicked ("activated") it, call preventDefault() on the event object in the click event handler!

Categories

Resources