Develop Reference

Traverse down to the next element down not immediate and of different type

So in an html structure like this:
<a class="member-main">
<!-- other divs and html elements -->
</a>
<div class="hidden-group-item">
<!-- other divs and html elements -->
</div>
I want to bind a click event to an html element with class .member-main so to show a hidden element .hidden-group-item.
There are plenty of those elements repeated in the page in pairs so I'd also like to show only that .hidden-group-item immediately below its respective .member-main
I'm aiming to do so with a function like below, helped by this previous question:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item')[0].toggleClass('hide')
});
I can get the element associated on click through this keyword (if I console log it), but I can't seem to grab that node that'd let me traverse down to the hidden-group-item.
How does this work in this case and what would be the most efficient way to achieve this?

...[0] returns a nodeElement not a jQuery object that has the function toggleClass. Try this:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item') // next is already returning one item so no need to try to access the first
.toggleClass('hide')
});

This works as expected
The docs about the .next() method says the following:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
Because you have the onClick handler and you're selecting the currently clicked element as $(this) then the matched set of elements is only the one you clicked, thus the next() call gets the .hidden-group-item just beneath it.
Sample
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item').toggleClass('hide')
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
JSFiddle

trouble excluding a class from dual selector

i'm trying to exclude a class from a jquery function, but I can't seem to get it to work properly. i tried .not() but it didn't seem to be working correctly.
here's the basic structure I have...
<div id='spotList' class='clickableSpot id_117 '>
<div id='leftCheckboxBar'>
<form id='checkboxForm' name='checkboxForm'>
<input type='checkbox' class='spotCheck' unchecked id='117'/>
</form>
</div><!--end leftcheckboxbar-->
<div id='leftCredits'>
<ul class='credits'>
<li id='agencyItem'>Agency: <span class='creditText searchAgency'>Y&R</span></li>
</ul>
</div><!--end leftcredits-->
</div><!--END SPOT LIST-->
Now I have a jQuery function where you can either click on the .spotList checkbox directly or on the .spotList div. It looks like this, and it works properly...
$('.spotCheck, .clickableSpot').click(function(){
/*do stuff*/
});
I don't want the span .creditText to be included in that selector. I can't seem to figure it out. There has to be a way for me to exclude clicking on that span and triggering the function. But I need everything else in the div to be clickable, just not that piece of text within the span.
Any ideas?

You can use target property of the event object:
$('.spotCheck, .clickableSpot').click(function(event){
if (!$(event.target).hasClass('creditText')) {
// do something here
}
});
You can also you stopPropagation method:
$('.creditText').click(function(event){
event.stopPropagation()
})
http://jsfiddle.net/4rBaM/

JQuery. Remove a previous sibling in the DOM tree

I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.

I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);

Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);

check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/

Show elements of a specific class Javascript(Jquery)

<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.

You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});​
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>

You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});

select a div which is not inside another div jquery

let's say I have an HTML structure like this:
<div class="first">
<div class="sub-1">
<div class="first again"></div>
</div>
</div>
How do I select only the div that has the class "first" but which is NOT inside the div that has the class "sub-1". In order words, how do I get only the outer div but extract any div inside that outter div that have the same class than the outter div (I want to get just the div with class="first", not the one with class="first again").
Thank you

See jQuery documentation for .not(). This should work:
$('.first').not('.sub-1 .first');

I dont know if you mean a very generic way to handle this but in this particular case you can only write.
$(".first:first")
A more generic way would be
$('.first').not('.sub-1 .first').prepend("I was first");
http://jsfiddle.net/JYLVc/