We Keep Coding

Isolating Div with jQuery function

Running into a spot of both with trying to target elements within a div.
I have a list of items on a page and I want to be able to show a description <div class="meta-description"> when the title (h4 / a) is hovered.
I can get this to work so that all h4 hovers show all descriptions, but I would like to be able to isolate it to the individual items within a div <div class="content-meta">.
Appreciate one option would be to set individual IDs for each, but this is for a template, so would rather avoid if possible.
Any guidance most appreciated!
Thanks

Instead of using selector for indicating the element. There are many traversing method, such as
.siblings()
.parent()
.prev()
.next()
and many others...
Try to use them in your case.

why $(':not(:has(*))').find("p"); won't give an output

I wanted to get the parent node of a text, and I know that it's not easily possible and should be done with manual traversing. but I want to know why the following is not working.
$(':not(:has(*))').find(':contains("mytext")');
I made it easier with just looking for p tag in the result.
I know $(':not(:has(*))'); would return some P tags
.find("p"); should select those P tags
I know it's not working but I want to know why?

You're trying to find descendant elements of elements with no descendants. That's not going to work.
If you're looking for p elements with no descendants, you probably meant to use .filter(), not .find():
$(':not(:has(*))').filter('p')
Or you can just attach the p selector to the :not() — there really is no reason to run a separate selector here (unless your selector string is coming from a variable or something):
$('p:not(:has(*))')

Hiding the <p> and showing the <textarea> on a <a> click

I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.
I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.
Here's the fiddle.
Here is the JS I tried:
$(".no_link").click(function(e) {
e.preventDefault();
});
$(".edit_offer").on('click', function() {
$(this).parent().parent().siblings().children("textarea").toggle();
});

You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:
$(".edit_offer").on('click', function () {
$(this).closest('.username').find("textarea").toggle();
});
jsFiddle example
.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.

I did it using find(). http://jsfiddle.net/SZUT8/2/ To make the script more accurate and future-proof you could consider adding a class to the paragraph and matching it, as in here: http://jsfiddle.net/SZUT8/4/

You could always assign an ID (or a class, for multiple) to each of the desired elements ("p" and "textarea" in your case). Then use your ID/class to reference them for the show() or hide() methods, rather than navigating the DOM via parent(), sibling() and children().
Then your click handler will only need the line:
$('#idOfElement).toggle();

Jquery .children() not working as expected

I am trying to make a basic captcha module for jQuery. I have a decent start on it, but for some reason .children() doesn't seem to work. See it here: http://jsfiddle.net/pTbeW/
I currently have this:
$(this).children('.captchain-start').hide();
$(this).children('.captchain-show').show();
If I change it to
$('.captchain-start').hide();
$('.captchain-show').show();
it works perfectly. But this solution is less than ideal, because it wouldn't allow two instances of this captcha to be on the same page. I suspect it has to do with the html being set by query, but I'm not sure how. I'm far from a javascript and jQuery expert, but this seemed like a relatively easy thing to do. What am I missing? Do I have tired eyes from looking at it so long? Any help would be appreciated.

Because the '.captchain-*' elements are not children, but are siblings. Try the following:
$(this).nextAll('.captchain-start').hide();
$(this).nextAll('.captchain-show').show();

You should use $(this).nextAll() instead of $(this).children() because the elements you want to hide and show are not children of the a element, but siblings.
See http://api.jquery.com/nextAll/

this
In your click event references the clicked element, which is the element with the class 'captchain-start'. So you do not have to scan for the children, you can use:
$(this)
for the actually clicked element or the element selector instead
instead.

trying to select the last element of a navigation bar

I'm trying to select the last element of a navigation bar that could have x number of elements. I know that jquery selectors are arraylike objects, so I have tried using bracket notation to select the last element:
$(".navLinks")[$(".navLinks").length - 1].text();
This has not worked. Can anyone help me out with this? How do you select an element within a jquery selector and then attach a method to that element?

Use the :last selector:
$(".navLinks:last").text();
Additional Information
You can read up on all jQuery's selectors here.

I guess
$('.navLinks:last').text();
will do it in a more convinient way.
Read more about selectors

Try:
$(".navLinks:last-child").text();

KISS - use the :last selector. More info here
$(".navLinks:last").text();

If you know the specific type of element you're looking for, .last() may be what you need. Here's an example with 'a'.
$(".navLinks a").last().addClass('myClass');