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 locate submenu elements (xpath, className or css locators)

I am struggling to locate some elements in my angulars JS app using protractor (JS Webdriver).
Heres is my HTML :
<div id="numDispBox" ng-mouseleave="hideNumDisplayBox()" style="display: none;">
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(20)">20</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(40)">40</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(60)">60</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(80)">80</div>
</div>
I would like to be able select the 2nd, 3rd and 4th inner divs.
I have used class name however it did not work :
element(by.css('[ng-click="UpdateNbResultPerNode(60)"]'));
I am not able also to find out the xpath with firebug as when I click on the inspector my submenu goes away even when I block JS mutation.
Thanks

I would use XPath to find this element.
The code would look like this:
driver.findElement(By.xpath("//div[#ng-click='UpdateNbResultPerNode(60)']"));
You can also do this by referencing the text like this:
driver.findElement(By.xpath("//div[text()='60']"));
Or maybe you need to first find the parent div:
driver.findElement(By.xpath("//div[#id='numDispBox']/div[text()='60']"));
I have a video on how to utilize XPath with webDriver at:
http://community.neustar.biz/community/wpm/load_testing/blog/2013/11/19/utilizing-xpath-to-interact-with-elements
Brian Kranson
Neustar, Inc. / Professional Services Engineer

There are many ways to do this,let me list two selectors which can locate the required elements.
The one which Whitney Imura has mentioned would be a good option.
css = #numDispBox div:nth-child(n)
In your case n can be 1,2 or 3 to locate 2nd, 3rd or 4th div element.
you can also try using + to locate its sibling.
For example, to locate the 2nd div element the following selector would work.
css = #numDispBox > div + div

In ruby, you can do (it's the same concept for what you're trying to do with the JS Webdriver):
driver.find_element(:css, '#id .class:nth-child(1))

You can also use element.all:
element.all(by.css('#numDispBox numDispOption')).then(function(items){
items[1].click();
items[2].click();
items[3].click();
});
or
element.all(by.css('#numDispBox numDispOption')).get(1)
element.all(by.css('#numDispBox numDispOption')).get(2)
element.all(by.css('#numDispBox numDispOption')).get(3)

I'm having difficulty appending a class

I originally couldn't think of a way to append an additional class to an li element which had a class that other li elements had. I wanted to only add a class to that specific li element that I clicked a select button on and the solution was "On the click of the button, you can use .closest() to find the ancestor li element". The solution was a jquery solution and it works fine but now I'm having an additional problem. First, here's what I originally posted and the solution I was given along with the fiddle and then I will explain what my new problem is and would appreciate the help. So my original post:
"Ok so my script allows me to input text in a textarea element and add it to a li element within an ordered list with the id "Glist". Not only is text added to each li I add to the ordered list, but the additional things below are added as well and they all just display additional images using CSS. One of the classes, "Selimg" displays a sprite image of a button that says "select". Now each li element I add to my ol has all of the elements below as well as the classes. So each li element will have a div with a "Selimg" class that displays an image of a button that says select for example. When I click this div with the class Selimg, a new class named "Selected" will be added to the div which will change the background color of the li to indicate that it has been selected. The problem is, I want to only add the "Selected" class to the div with the Selimg class that I've clicked, not all li elements with "Selimg" classes. How can I do that with an onclick event handler or any other way using js or jquery? Here's the html:
<ol id="GList">
<li class="MyList">
<p class="bulletp"></p>
<!--This Selimg class displays an image of a button that says select-->
<div class="Selimg"></div>
<!--When a user presses this select button, I want to append a class only to the specific li element the user has pressed the select button on. -->
<div class="edit1"></div>
<div class="Del"></div>
<div class="progress"></div>
<div class="ShowMore"></div>
<div class="CheckedGoal"></div>
<div class="PCompetePercent"></div>
<div class="ShowMoreBlock"></div>
<div class="goalTxt"></div>
</li>
</ol>
The solution I was given:
"On the click of the button, you can use .closest() to find the ancestor li element"
$('.Selimg').click( function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
here's the fiddle demonstrating the solution: http://jsfiddle.net/arunpjohny/fSMDv/2/
And now for the new issue. For some reason, the jquery solution was not working on it's own. Somehow, the jquery code above only worked when I placed it into a js function like this:
<script>
function runSel() {
var $li = $('.Selimg').closest('li').addClass('liselected');
$li.siblings().removeClass('liselected');
}
</script>
I also have a function that's called whenever I want to add another item to the list.
//This is only the part of the code that creates the div that I style to look like and be used as a button that says select. There's more code that also creates the li element itself and a few additional things but all for design. Nothing important.
var Selimg = document.createElement('div');
Selimg.setAttribute("class", "Selimg");
Selimg.setAttribute("onclick", "runSel();");
entry.appendChild(Selimg);
What this does is, create the div with the class "Selimg" which will be an image of a select button added to my list item and then it's given the onclick attribute that calls the runSel() function above as you can see. It works. However it only works once. The fiddle example demonstrates what I'm looking for. So now, when I add an item to the list, and click the select button on it, the function "runSel" is called which adds a class called "liselected" and liselected just changes the background color because the rules for each property in the css, have "!important" so the background color overrides the current one. It works, but like I said it only works once. After I add another item, and press the Select button on that one (which is made from the styles from the Selimg class), the liselected class is removed from the other li element yet the second li element that I just clicked the select button on, only causes the liselected class to be removed from the first but it's not added after that to the second li item, the current one. So, when i add multiple li, they will contain things like text and a div styled to look like a button that says "select" and so when I click "select" on an li, I want then for that specific li to have the liselected class appended and when I select the "select" button on another li, I want the class liselected to be removed from the other li element it was on and added to that one.

The jQuery solution will work fine... the problem is you are dealing with dynamically created elements... so need to use event delegation
$(document).on('click', '.Selimg', function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
Also from what I understand you have not added the script in a dom ready handler
Demo: Fiddle

Not sure why you have written a book for such a small issue. I mean, I got tired of reading what you wrote after the first 30 lines of not getting to the point of the question.
Use: $(this).parent('li').addClass("...") instead.
jsFiddle

understanding jQuery parent, children and sibling

I am struggling to figure out where I am going with the current show and hide function I am trying to incorporate on my site. I have a drop down menu show and hide function similar to the one currently implemented at Hippodrome Mobile Casino. Which is identical to my HTML. My div class I am noticing with my Jquery when i click the next button .regNext it hides all three .regGroupContent divs. However i want to add and remove the active class which i current have as display:none on my site.
$('.regGroupContent').removeClass('active');
$('.regGroupContent').eq(0).addClass('active');
$('.regNext').click(function () {
var $this = $(this);
$('.regGroupContent').hide().removeClass('active');
$this.parent().children($('.regGroupContent')).show().addClass('active');
});
Html
<div class="vengeForm">
<div class="regGroupContent">
<div class ="fieldset">
<ul class="fieldset">
<li class="editor-next">
</li>
</ul>
</div>
</div>
</div>

This line has a bit of a syntax issue:
$this.parent().children($('.regGroupContent')).show().addClass('active');
In the children selector, you don't need a jQuery object, rather just the class name. Also, your .parent() selector is only going one level up, you need to get to the top of the element tree. Try changing it to:
$this.parents('.vengeForm').children('.regGroupContent').show().addClass('active');

select a parent with jQuery

Hello I have some HTML that looks like this,
<div id="music_interests">
<ul class="interests">
<li >
<div class="interest inline">
<img src=""/>
<div class="interest_popup">
1 users have this interest.
Remove interest </div>
</div>
</li>
</ul>
When users clicks the remove button I need to select the parent div (in this case music_interests). How would I go about that?
I have tried doing the following,
$(this).parent().parent().parent().parent() but is there a more elegant way?
To complicate things futher I will not actually no the parents ID when in the app as the remove button occurs in 4 or 5 different areas on the page.

you should use closest()
$(this).closest('div#music_interests');
//find the nearest div with id "music_interests"
//if i omitted the id, it retrieves the div with class "interest_popup"
or parents()
$(this).parents('div:eq(1)');
//get ALL the ancestor divs (until it reaches root tag)
//since music_interests is just 2 levels up, use :eq(1)

If the ID of the DIV you want to remove is static you should only use the ID selector (not something like $("div#music_interests")) as the ID selector is directly mapped to the DOM function document.getElementsById which is pretty fast:
$("#music_interests").remove();
If the ID isn't static you could get the UL just like that:
$(function(){ //execute when page has been loaded
$(".remove").click(function(){ //attach click handler
var removeDiv = $(this).closest("ul").parent().remove(); //get next UL -> DIV is its parent
return false; //stop further processing of "click" event
});
});

if remove button always exist in ul tag (in all your 4 or 5 different areas) then you can use the following code.
$(this).closest("ul").parent()
in this case u don't even need to give id to DIV tags