Develop Reference

jquery selector finding div without id or class

<div id="target">
<div>here</div>
<div>select this<div>it has more div within</div></div>
<div></div>
How to get the last child of target? I tried
$('#target').find('div:nth-child(2)')
Is this even correct? It seems like it will also select div within my target, which is what I don't want, hmm.

$('#target').children().last();

Use :last-child pseudo-class selector with direct child selector(>).
$('#target > div:last-child')
console.log($('#target>div:last-child').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
To select the second child use :nth-child(2) along with direct child selector(>) to avoid nested element.
$('#target > div:nth-child(2)')
console.log($('#target > div:nth-child(2)').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>

Let me fix your markup first:
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
As far as I understood, you only want to select the text "select this". I am not sure what you are trying to do, but if you only want to get the text. You can just manipulate the string getting it using text() and then remove the <div>...</div> part. But, if you are trying to put some css attribute like color onto this node. You need to fix your div because of the cascading feature.
So instead, you might want to do this:
<div id="target">
<div>here</div>
<div>
<div>select this</div>
<div>it has more div within</div>
</div>
</div>
and then
$("#target").children().last().children().first();

toggleClass not closing div once opened

I have some really simple lines of jQuery that are meant to open and close a div when clicking a link. When I click, the div opens fine (and any other open div, will close, which is good). But, when I click the link again the div will not close! I cannot figure out why. Any help would be much appreciated!
HTML:
<a href="../partial-2" id="products">
<div class="products">
<p>products</p>
</div>
</a>
<div class="row product-options products-house shadow">
<div class="col-sm-6 col-sm-offset-3">
....content here, removed for brevity....
</div>
</div>
jQuery:
$(document).ready(function(){
$("#products").on("click", function(e){
e.preventDefault();
$(".active-product").removeClass("active-product");
$(".products-house.shadow").toggleClass("active-product");
});
In my CSS, I just have a display:none for the products-option, and display: block for active-product

While removing the class exclude the .products-house.shadow element using :not() pseudo-class selector.
$(document).ready(function(){
$("#products").on("click", function(e){
e.preventDefault();
$(".active-product:not(.products-house.shadow)").removeClass("active-product");
// --------^^^^----------------------^^^^------
$(".products-house.shadow").toggleClass("active-product");
});

jQuery Show and Hide div

I have a page what will have a few buttons on it and on a click of a button I basically need it to swap divs out - I have them wrapped in a parent div with an id and then each div that will be replaced will get it's own id as well. I got this code to work for swapping, but it will be tedious and not good code at all to do this if we end up with 30 or so pairings.
So how do I clean this up so on a click, the active div is set to display: none, and the one clicked is set to display: block?
Here is my jQuery code that is working for now. For this I want the macaroni to display and the farfalle to hide.
$('#macaroniButton').click(function(){
$('#macaroni').toggle();
$('#farfalle').toggle();
});
<div id="topchanger">
<div id="farfalle">
.....
</div>
<div id="macaroni">
.....
</div>
</div>
<div class="circlerow">
<div class="circlepasta" id="macaroniButton">
......
</div>
<div class="circlepasta" id="AnotherButton">
......
</div>
</div>
</div>

You could start with this. Expand my answer accordingly.
$('#macaroniButton').click(function(){
$("#macaroni").show().siblings('div').hide();
});

You can give a class to all the div that you want to show/hide and before handling a click, hide all div with that class. Let's say you give it a class 'item':
<div id="topchanger">
<div id="farfalle" class="item">
.....
</div>
<div id="macaroni" class="item">
.....
</div>
</div>
and your javascript will be:
$('div.item').click(function(){
$('div.item').hide();
$(this).show();
});
Note that $(this) refers to the item that was just clicked.
Hope it hepls

how to select only div within parent after click

I am trying to figure out how to select a particular element with a certain class name within it's parent div, after a click event.
<div id="news">
<div class="one">
<p>news</p>
</div>
<div class="two">
</div>
</div>
<div id="users">
<div class="one">
<p>users</p>
</div>
<div class="two">
</div>
</div>
my simple jquery is as follows:
$(".clickme").on("click", function () {
//how to select only the element with the class "one" within the parent and show it
});
My failed attempts have been trying to use the parents and closest methods and code like $(this).parents().find(".one").show();
Any help would be great!!

Working Demo
try this
$(this).parent() refers to parent div
.prev('one') to previous sibling with class .one
$(this).parent().prev(".one").show();

Try with .prev()
$(this).parent().prev(".one").show();
See the DEMO

I would traverse it like this.
$('.clickme').click(function(){
$(this).parent().siblings().eq(0).show();
});
fiddle

jQuery toggle multiple areas individually

I'm using jQuery to show and hide areas on my site with just a toggle. Which works fine, but if i have multiple elements I want to show and hide individually on the page I have to write a bit of jQuery for each item. Is there a way to do it for a class or ID within the encapsulating class?
heres my jQuery:
jQuery('.collapse').click(function() {
jQuery('#filterArea').toggle('slow', function() {
});
});
And heres my content:
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div><br />
<div class="addPadLeftNoFloat" id="filterArea">
<p>Content for box</p>
</div>
</div>
I want to be able to have a few areas on the page with the class of collapse that just close the filterArea within the outer collapse? Or similar? I'm not doing a great job of explaining this! - So if i have two divs with the class of collapse, when i click them the filterarea of that div collapses
Tom

Instead of having filterArea as an id, change it to a class.
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div>
<br />
<div class="addPadLeftNoFloat filterArea">
<p>Content for box</p>
</div>
</div>
Also change your JavaScript to this:
jQuery('.collapse').click(function() {
jQuery('.filterArea').toggle('slow', function() {
});
});
A working example.
Edit: if you only want to collapse .filterArea elements with the enclosing .tab element, use JavaScript something like this:
$('.collapse').click(function() {
$(this).closest('.tabs').find('.filterArea').toggle('slow');
});
Updated example.