Develop Reference

Hide all elements except the given data-* attribute with jQuery

I'm making a menu if someone clicks on one object it should filter all of them accordingly (i.e: all projects, completed projects a.s.o. I have a jQuery to take care of this like this (I added the .not() recently, before adding it this script worked):
$("#completed").click(function(){
$('.project_wrapper[data-category="completed_projects"]').not(this).hide();
});
I have figured out that I should use .not() to .hide all objects that don't have the given [data-category] or am I doing this wrong?
Edit
The HTML:
The Menu:
<ul class="project_menu>
<li id="complete">Completed Projects</li>
</ul>
The Projects:
<div class="project_wrapper" data-category="completed_projects">The projects</div>
Edit
Got it working thanks to #Nitha & #Sam Hollenbach thanks!
Edited a bit myself but here is the final jQuery code I've got:
jQuery(document).ready(function($){
// Show all
$("#all").click(function(){
$(".project_wrapper").show();
});
// Complete
$("#complete").click(function(){
$(".project_wrapper:not([data-category='completed_projects'])").hide();
$(".project_wrapper[data-category='completed_projects']").show();
});
});
Update
Instead of using .show and .hide I used .css("visibility", "collapse") & .css("visibility", "visible") show and hide seemed to bug out for me in WordPress.

The below code will hide all the project_wrapper div with data-category not equal to "completed_projects" and will show the project_wrapper div with data-category equal to "completed_projects"
$(".project_wrapper:not([data-category='completed_projects'])").hide();
$(".project_wrapper[data-category='completed_projects']").show();

I believe what you're asking is to hide all elements within .project_wrapper except for the .project_wrapper[data-category="completed_projects"] element. In that case I believe you can do this
$('.project_wrapper *').not('.project_wrapper[data-category="completed_projects"').hide()​;
Or if you want to remove everything in the body
$('body *').not('.project_wrapper[data-category="completed_projects"').hide()​;
This will remove all elements within .project_wrapper or body, subtract the one with the correct data-category, and then hide all the others.
Source

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.

Scroll to specific element in overflowing div

I have a div with overflow that acts like a list (since a real "select" is a pain in the arse when customizing and keeping it that way in all browsers).
The Problem is, the list is long and I would like that when the page loads the "selected" element of the list would be more or less in the middle of the div, something like putting selected=selected to a option in a select.
Here is a Fiddle
Thanks in advance.

If you are just trying to take the scroll to the middle, perhaps you could try this js:
document.getElementById('wraptable').scrollTop = document.getElementById('wraptable').scrollHeight / 2;
It takes the scroll of the #wraptable to the middle.
FIDDLE DEMO

You can use an anchor :
give a specific id to one of your list items (example: "anchor")
when you link to this page, add the hashtag #anchor to the url and you list will be scolled to the list item with corresponding id.
Example url : www.yourpage.com/list should become www.yourpage.com/list#anchor
This DEMO will show you.
<li id="anchor"><span>12 years</span> ... </li>
anchor link
editable fiddle

If you use jQuery you can make the "select" container to scroll to a specific element. In this case, I add a .select class to a random li just to show how it works.
Then, you can do the scroll on the #wraptable container by the number of pixels the .selected element is according to its parent.
$(function(){
var offsetSelectedElement = $(".selected").position().top;
$("#wraptable").scrollTop(offsetSelectedElement);
});
DEMO
EDIT:
To add jQuery simple add the library in the head section of your page:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
...
</html>
If you don't want to use jQuery though, you still can achieve the same result through pure javascript, but it's more code:
var offsetSelectedElement = document.getElementsByClassName("selectedItem")[0];
var wrappable = document.getElementById("wraptable");
wrappable.scrollTop = offsetSelectedElement.offsetTop;
DEMO

jquery class selection

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')

if/else statement

I am trying to write an if/else statement that will hide my .thumb <div>s whenever the "about" or "contact" links are clicked. I want all of the .thumb <div>s to slide up.
http://dl.dropbox.com/u/14080718/Final/UITabs15.html
I don't have much experience writing if/else statementsI cant seem to figure out the right syntax any help you can give would be much appreciated.
$(function(){
$('.thumb').hide();
$('.subnav').click(function(){
var $menuelement = $('.thumb').eq($(this).closest("li").index());//find the matching nth element in the menu
if($menuelement.hasClass('active')){//if clicked element is already expanded
$menuelement.removeClass('active').slideUp();//remove the active class and hide it
} else {//otherwise,clicked element is not already expanded...
if ($('.active').length>0) {//...but another element is expanded
$('.active').removeClass('active').slideUp( function(){
$menuelement.addClass('active').slideDown();//add the active class and show it
});
} else {//another element is not expanded
$menuelement.addClass('active').slideDown();//add the active class and show it
}
}
});
});

I can't try this because it's a bit orphaned, but try the following (or at least the following idea). I was confused because your link didn't actually include the code you posted. Try posting a jsfiddle with the code if you're still having problems.
Your ($('.active').length>0) statement doesn't need the >0 part - all no-zero lengths will return true.
$(function(){
$('.thumb').hide();
$('.subnav').click(function(){
var menuelement = $('.thumb').eq($(this).closest("li").index());//find the matching nth element in the menu
$(menuelement).toggleClass('active').slideToggle();
$('.active').not(menuelement).removeClass('active').slideUp();
});
});