We Keep Coding

Show nth:div 1, when i click nth: anchor

Good Evening helpful people of stackoverflow,
I want to hide the **clicked ** .project-tile-normal and show the appropriate description div .detail-tile.
I read through some articles regarding my question, but i run into a logical brickwall in my head. Needlessly to say, i'm a beginner in jquery and maybe there is a better way to do that, i just didn't find it.
Here's what i found so far as "answers":
Hide Children, Show nth Child - the closest answer to my question
Show and Hide Several Links - this solution makes my head dizzy
My HTML consists of two rows of divs, similar to that simplified representation:
<div class="wrapper">
<div class=".project-tile-normal">some pictures</div>
<div class=".project-tile-normal"></div>
<div class=".project-tile-normal"></div>
<div class=".detail-tile">description</div>
<div class=".detail-tile"></div>
<div class=".detail-tile"></div>
</div>
This is what i have so far coded:
JQUERY
$(document).ready(function(){
$('.project-tile-normal').on("click", function() {
if( $(this).hasClass("active") ) {
$(this).fadeOut(150);
} else {
var itemid = '#div' + $(this).attr('target'); // my own try to get the Element of the divs.
console.log(itemid);
$(this).addClass("active");
$(".detail-tile").removeClass("hidden");
}
});
$('button').on("click", function(){
$(".detail-tile").addClass("hidden");
$(".project-tile-normal").fadeIn(150);
$(".project-tile-normal").removeClass("active");
});
});//document ready
Should i put all the Items in an array and then count it out? Thanks for your help in advance.

First of all remove the . before the class attribute since there is no need of it. As per the jQuery code there is no need of it. If you are using . you need to escape it using \., in the jQuery selector it may be like $('.\\.project-tile-normal') .
Now you can do the rest using index() and eq(),
$('.project-tile-normal').click(function() {
// you can use toggle if you want toggle between the show and hidden
// else use show method
$('.detail-tile').eq($(this).index()).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="project-tile-normal">some pictures</div>
<div class="project-tile-normal">1</div>
<div class="project-tile-normal">2</div>
<div class="detail-tile">description</div>
<div class="detail-tile">1</div>
<div class="detail-tile">2</div>
</div>

Firstly note that your class attributes in the HTML should not contain any . characters.
With regard to the JS, you can link elements by index by retrieving the index() from the clicked element then selecting the matching required element using eq(), something like this:
$('.project-tile-normal').click(function() {
var index = $(this).index();
$('.detail-tile').hide().eq(index).show();
});
Working example

You're declaring your classes wrong in your HTML. It'll be project-tile-normal instead of .project-tile-normal. On doing that you'll be finding your events working. Then you can actually follow those tutorials to pull off your desired behavior on project title click.

get index out of selected elements

So I have a div with some child elements and when I select one with jQuery I want to get the index of it within a selector
<div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="red"></div>
</div>
So lets say that I have the last element in the main div selected. If I call index() on it it will give me '7' because out of all the child elements the index is '7'. But now lets say I want to get the index based on the other 'red' elements, the goal is to return a value of '4' because out of all of the 'red' elements it is the fifth one. I looked through the documentation and didnt find a whole lot, then I experimented with putting selectors in the index() method like index('.red') but I couldn't get anything working.

Well, the documentation says:
.index( element )
element The DOM element or first element within the jQuery object to look for.
So can do:
selectedElements.filter('.red').index(this);
If you don't have selectedElements already, you can select corresponding siblings with, for example:
$(this).parent().children('.red')
If every element has only one class and then the filter can be dynamic:
var index = $(this).parent().children('.' + this.className).index(this);

Use the .index() function documented here
For the above if one wants to get the index of a element of the red class use $('div .red').index(elem);
$('div .red) will create a list of the elements with the red class within the div. .index(elem) will search for the elem within the array.

Running through all of them using id=test as parent
DEMO : http://jsfiddle.net/T7fXR/
$('#test > div').each(function(){
var thisClass=$(this).attr('class');
$(this).css('background',thisClass );
/* get index based on class*/
var idx=$('.'+thisClass).index(this);
$(this).text('Index= '+idx)
})

For me, this works just fine with your given HTML:
$('div').eq(5)​​​​​​​​​​.index('.red') // 3
You can place selectors into the .index() function.

find index of child using jQuery?

If I have an html structure like:
<div id="parent">
<div class="child first">
<div class="sub-child"></div>
</div>
<div class="child second">
<div class="sub-child"></div>
</div>
<div class="child third">
<div class="sub-child"></div>
</div>
</div>
and I have a click handler defined through ($('#parent.child')).click() and then I click on the div with the class of second (first, second, third classes have simply been added to make demo clearer) is there a simple way to get the number 1 as it is the second child? (0 based index)?
Something like $(this).index

Just have a look at the jQuery API. The method you suggest, index, is exactly right:
$('#parent .child').click(function() {
var index = $(this).index();
});
From the docs:
If no argument is passed to the .index() method, the return value is
an integer indicating the position of the first element within the
jQuery object relative to its sibling elements.
Also note that I've changed the selector slightly from your example. I'm guessing that was just a typo in your question though. #parent.child will look for an element with ID "parent" and a class of "child", but you actually want #parent .child (note the space) to find elements with class "child" that are descendants of an element with ID "parent".

The index() method can be used for getting the position of an element inside a collection. In basic circumstances, $(this).index() should work.
But with more specific collections, you can get the position with collection.index(item). Imagine adding something simple into your #parent that should not be counted when measuring index() (a span, img, anything). With the simple method, your code is likely to break, but with the specific method, it won't.
Something like this should work for you:
var $children = $('#parent .child').click(function​ () {
console.log($children.index(this));
});​
jsFiddle Demo

How can I say this in jQuery?

I want to append some text after 2 closing divs to a sector element.
Click me
</div>
</div>
// this is where I want to append the text
My code appends the text after the link. How can I say "append it after the 2nd closing div"?
$('a.thingIClicked').click(function() {
$(this).append('hello');
});

The most direct way to do this is to find the second parent <div> element, and then insert the text after it.
$('a.thingIClicked').click(function() {
$(this).parent("div").parent("div").after("some text");
});
This will insert the text on the outside of the second <div> parent. Using append() will put the text on the inside of the parent, which from your example doesn't appear to be what you want.

There's probably a more elegant solution, but how about:
$('a.thingIClicked').click(function() {
$(this).parent().parent().after('hello');
});
Edit: #Zack is correct (and should probably get the answer credit for this one) - my original code would have added the text into the second enclosing div, rather than after it. I've edited my code above accordingly.

The easiest way would be to give the outer div an id and then use $("#outerdivid").
EDIT: Below will not work, but leaving it here for reference
However, you should also be able to use a jquery :parent filter:
http://api.jquery.com/filter/
$('a.thingIClicked').filter(':parent').filter(':parent').click(/**/);

Use .insertAfter()
http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

Use .insertAfter() - http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

How do I select the first instance of an element of a certain class enclosinga DOM element

Hi guys lets say I have the following html:
<div class="owner">
<div>
click
</div>
</div>
<div class="owner">
<div>
click
</div>
</div>
I want to put code in the onclick handler so it results in selecting the element of class 'owner' which encloses it - so I don't have to refer to the parent element by typing in this.parentNode.parentNode etc
I'd appreciate if theres a way to do it using selectors from both prototype and jquery.

$().parents(<selector>) is your friend
$(a).click(function() {
$(this).parents(".owner").css("background-color", "yellow");
})
example

Why not use this.parentNode.parentNode? If the structure is fixed, this will be faster and more efficient.
If the structure is not fixed, a jQuery way would be something like:
$(this).parentsUntil (".owner").filter (".owner");