jquery class selection - javascript

I am having a hard time trying to figure out how to properly select a class inside the menu.
It worked fine until I put the menu in a ul. Can anyone tell me what is going on and how to fix it?
http://jsfiddle.net/nategines/7XrUk/

Here’s a working version: http://jsfiddle.net/3hbk7/
var $menuelement = $('.demo ul').eq($(this).index());//find the matching nth element in the menu
…should’ve been:
var $menuelement = $('.demo ul').eq($(this).parent().index());//find the matching nth element in the menu

Sure. The problem is that you're calling index on the link, which is a child of the li, and so will always only be the first child. You want the index of its parent instead.
Fixed here: http://jsfiddle.net/7XrUk/1/

That's pretty vague, but this is the concept if the child is nested:
$('.menu').find('.class')

Related

.Finding the closes element in jQuery

I have a dropdown menu I'm working on. I've added a hidden icon on each item. Then once the menu generates, I want to go through and find which items have sub-menus and remove the hidden class for those items.
I can't seem to be able to get this code working.
var tags = $("li > ul.sub-menu").each(function(){
$(this).parent("li").closest('i.hidden').removeClass("hidden")
})
This is the html/css
http://pastebin.com/FzTFeYMq
I'm using IE8 so right now I can't get a proper fiddle up.
If I'm understanding correctly, what you're trying to do is unhide the carets for any menu/submenu that has children. The following should accomplish what you're looking for:
var tags = $(".sub-menu").each(function(){
$(this).closest('li').find('a > span > i:first').removeClass("hidden")
})
I tossed up a quick CodePen demonstrating this here: http://codepen.io/P1xt/pen/eZMLrq
In your loop you have to find the first element with a statement like this:
$(this).find('i.hidden:first')

How to hide parent div based on child name?

I have a page with numerous divs. The main div contains 3 sub divs. I put a search box and i want to show the main div based on what i type and hide the others.
I looked on the internet and so far i managed to do this: https://jsfiddle.net/qaho8hjt/6/
$('.my-textbox').keyup(function() {
var value = $(this).val();
var exp = new RegExp('^' + value, 'i');
$('.change_req .orizontala').each(function() {
var isMatch = exp.test($('.projectName', this).text());
$(this).toggle(isMatch);
});
});
The problem is that i don't know how to hide the parent div. I can only hide the div that i search for.
Thank you.
Edit: Thank you all for you're responses.
Code is almost fine, just that you are hiding the div that has the content where you should be hiding its immediate parent, demo
replace
$(this).toggle(isMatch);
with
$(this).parent().toggle(isMatch);
You can use closest() to get the nearest containing div. Try this:
$(this).closest('.change_req').toggle(isMatch);
Updated fiddle
Try like this:
$(this).parent().toggle(isMatch);
See your edited code here.

Find closest select box with a class from an element

From the starting point of an element that happens to be a select box (element has a class of: service_category_selection) I want to find another select box (element has a class of: service_selection).
I need to grab specifically the closest element with class: service_selection because I don't want to grab all of the elements with that class.
Snapshot of how far away that first select box is from the second select box:
Assume that $(this) already contains the first select box. Now I just need to draw the route to the closest next select box with the class: service_selection.
I attempted to use .closest but it wasn't working for me.
Example: var el = $(this).closest(".service_selection");
You need to get the overall top parent container - then find the element:
var el = $(this).closest(".row").find(".service_selection");
Doing this kind of navigation is a bit hackish and easy to break since your logic highly rely on your layout. I suggest you to use a unique CSS class on that element and access it directly.

jQuery: Toggle class on one element, remove same from all other

new here and deeply hoping I'm not missing a stupid syntax flaw. I was thinking that my problem is a fairly common one, but somehow nothing has helped so far in my specific case.
There is a simple inline-block list of Image Galleries which are zoomable to fill the parent width. As soon as one is zoomed through click on a child, the others should unzoom by stripping of the class which maximizes them. Nothing more to it.
I achieved the first part via the following jQuery (where the problem is hidden in the for-loop, I think):
$(".zoom").click(function() {
var target = $(this);
target.closest('div.product-item').toggleClass('maximized');
var ot = document.getElementsByClassName('product-item');
for (var i = 0; i < ot.length; i++) {
if (ot[i] !== target) {
ot[i].removeClass('maximized');
}
}
});
So: Some .zoom classed element is clicked, its parent is toggled to maximize and a for loop checks all other elements of the same class as the parent and removes the .maximized class.
The reason the script is constructed with a for-loop and a removeClass is so that the same .zoom elements are able to minimize their parent elements, not only to maximize them.
Im not a javascript professional, but to my knowledge this should work in principle. Am I missing anything here?
This post from a year ago addressed a similar problem but didn't help in my case: jQuery onClick: How to add class to element and remove from all others
You can find a pen to see the script in action here.
$(".zoom").on('click',function() {
var target = $(this);
$('div.product-item').removeClass('maximized');
target.closest('div.product-item').toggleClass('maximized');
});
you can use
if(target.closest('div.product-item').hasClass('maximized')){
$('div.product-item').removeClass('maximized');
}else{
$('div.product-item').removeClass('maximized');
target.closest('div.product-item').addClass('maximized');
}
JSFIDDLE

Cannot select all elements except one

I am trying to select all the elements of a page except one, inside a function:
$('#sidebutton').click(function () {
if (!$('.sidemenu').hasClass("current")) {
prevScrolPos = $(window).scrollTop();
scrollTo = 0;
} else {
scrollTo = prevScrolPos;
}
$('.hidelem').toggleClass("hidden");
$('.sidemenu').toggleClass("current");
$('html,body').scrollTop(scrollTo);
});
It works when I use a simple class selector (.hidelem), but doesn't when I use something a bit more complicated (for example, $("*:not(.sidemenu)").toggleClass("hidden"); or $("*").not(".sidemenu").toggleClass("hidden");); these just lead to a blank window.
Could you tell me what I'm missing here?
JSFiddle: https://jsfiddle.net/et978wjw/5/ (full functionality is missing but I hope you get the idea)
The problem is that you may be skipping .sideMenu with $("body *:not(.sidemenu)"), but you are not skipping its parent DIV. If you hide an ancestor, you hide all its descendants too. You also do not skip any descendants, so the children of .sidemenu are also hidden
So you need to exclude anything that is an ancestor of .sidemenu with :not:(has()), then exclude the sidemenu itself, then exclude any children of sidemenu:
$("#container :not(:has(.sidemenu)):not(.sidemenu):not('.sidemenu *')").toggleClass("hidden");
JSFiddle: https://jsfiddle.net/TrueBlueAussie/et978wjw/8/
You really should direct the hide/show at something more specific though. Perhaps a wrapper div around everything you want hidden? I added one for the demo.
Now having said all that, your selection process is quite complicated. You would be better off simply adding a class to all the things you want to toggle instead and just toggle those (you already have nodisplay on the divs, so I used that for now).
e.g. just this:
$(".nodisplay").toggleClass("hidden");
JSFiddle: https://jsfiddle.net/TrueBlueAussie/et978wjw/9/

Categories

Resources