We Keep Coding

Open an anchor link inside a div

I want to prevent an anchor link to open on the document body and instead render inside a div. I've used e.preventDefault() but I think JQuery isn't targeting that event.
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div. The structure looks like this:
//this is just a structure, not the actual HTML
<div id="results">
<ul> .ulStyle
<li> .list-group-item
-header
-p .lead
-a .anchorStyle
</li>
</ul>
</div>
Then, I add classes to each element. Everything but the ul is getting the class and I think that may be why it's not targeting the anchors.
jQuery:
$(function(){
console.info('** anchor-tag click handler **')
/*
I've tried variations on the targeting from a
single $('.anchorStyle') to what you see below.
*/
$('div #results ul .ulStyle li .list-group-item a .anchorStyle')
.click(function(e) {
e.preventDefault();
$('#results').empty();
$('#results').load( this.getAttribute('href') );
console.log('anchor clicked...');
});
});
I get the first console message on reload but not the second on click.
Questions:
Do I need a class on the ul to target it properly? I'm only adding
it to the ul for that purpose.
Does this piece of code execute with everything else and the ul may not have been created yet? JS/jQuery should
still bind and keep listening to an event if it exists - or in this
case, find the element I'm targeting after the click event fires,
no?

Couple of problems in the code to point out...
First is that the selectors are not right. You have a space after your element and it's class which is wrong (Eg:ul .ulStyle here .ulStyle is considered as a child of ul).The selector must be like this
$('div#results ul.ulStyle li.list-group-item a.anchorStyle')
Notice I have removed the spaces between the element and it's class..
Even after getting this changes done it still won't work for you because the elements are added dynamically. Taking this line from the OP
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div.
So this calls for a need to use event delegation
The syntax must change to
$(document).on('click','div#results ul.ulStyle li.list-group-item a.anchorStyle',function(){//your stuff here});
Further you can keep the selector simple as
'#results a.anchorStyle'

Here you have a working example with your structure:
$('#results ul li a').click(function(e){
e.preventDefault();
console.log(this.href);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<ul>
<li>
<header>HEADER</header>
<p></p>
ANCHOR
</li>
</ul>
</div>

jQuery onclick show first parent div

I have an issue with a show of a parent div at onclick.
As here:
$('#click').click(function() {
$(this).parent().closest('div').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/
I need to show the .show div at the li click, and i need to hide the first when i click another.
Someone know's a method?
Thanks so much

Id's should be unique on the page.
$('.click').click(function() {
$('.show').hide();
$(this).find('.show').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/11/

First Id's must be unique so change it for:
<li class="click">
Bye
<div class="show">Hey</div>
</li>
and the code change it for:
$('.click').click(function() {
$(this).find('div').slideToggle("fast");
});
LIVE DEMO

Some suggestions:
remove all duplicate IDs
if you must use a selector on the li elements, use a class
.show is a child of the li that's clicked, so there's no need to use .parent() or .closest().
Code:
$('.click').click(function() {
$('.show', this).slideToggle("fast");
});
DEMO
BONUS
$(elm).find('.selector') is equivalent to $('.selector', elm)
Also written as jQuery( selector [, context ] )
When context is not specified, it is assumed to be document
Thus $(elm) is equivalent to $(elm, document)

On your "li"s change the id to a class so you can reference multiple divs.
Then on the script looks like this:
$('.click a').click(function() {
var item = $(this);
$(this).parent().siblings().find('.show').slideUp(400,function(){
item.parent().find('.show').slideDown(400);
});
});
See it working on your fiddle (sorry for updating without forking)

How to target elements under clicked with jQuery

I want to hide everything under (but leave the ones above) the element that was clicked by the user. Check out this demo: http://jsfiddle.net/dS2vA/
So if you click on the 2nd <li> the three <li>s under it should be hidden. If you click the 4th <li>, only the 5th element should be hidden.
I tried doing it with :not('clicked') but that targets the elements above the clicked element, as well.
Any ideas?

Just use the following:
$(this).nextAll().hide();
DEMO: http://jsfiddle.net/dS2vA/1/

Try something like this:
$('ul li').click(function() {
$('ul li').each(function() {
$(this).removeClass();
})
$(this).nextAll("li").slice(0,3).addClass('clicked');
})

in addition to VisioN's answer, to be more specific you can add a selector filter ("li") to nextAll() like this:
$(this).nextAll("li").hide();

jquery how can i change only link class when this link ic clicked

i have a li items i need to change class of the clicked items as follow
remove class current from the default one
add class current to the clicked one
my html code here
<ul class="filter">
<li>recent</li>
<li>top popularity</li>
<li>top commented</li>
<li>other ...</li>
</ul>
and here is the jquery code to do that job
$(".filter > li a").click(function(){
$(".filter li a.current").removeClass("current");
$(this).addClass("current");
});
it works perfect otherwise when i clicked on any link else these links it apply that code to it, i need to apply this code only to ul.filter

Probably this would be easier and simpler. What it does is just removes its siblings current class and add new current class to itself.
$('.filter a').click(function(){
$(this).addClass('current').siblings().removeClass('current');
});

Use :not() to omit the current item
$(".filter > li a").not(".current").on('click', function(){
if(!$(this).hasClass("current")) {
$(".filter").find("a.current").removeClass("current");
$(this).addClass("current");
alert($(this).html());
}
});
Demo

This snippet should work for you!
$('.class a').on('click', function(){
$('.class a').removeClass('current');
$(this).addClass('current');
});

If you want the click processing to occur only within ul.filter then you should update your selector to reflect that:
$("ul.filter > li a")
Rather than
$(".filter > li a")
If you have more than one ul element with the "filter" class and you only want to apply the functionality to one of them then you should give that particular ul an id and change your selector to use the id.

Changing Style with click in jQuery

i am trying to make a to do list app. When i click a span with class "check" then i want to apply a style. Then the class of the span will change to "uncheck". When click the uncheck then the previous style will restore. Here is the html and jquery what i have done so far.
Problem: Problem is when i first click the span it works The "uncheck" class get removed and "check" class get added. Then the second part not works. I suspect the second part don't working because the "check" class is not in the dom when document.ready() is runs.
Any help will be greatly appreciated! Thanks!
HTML:
<div class="note-body">
<ol>
<li>M2u category shown. M2u category shown M2u category shown M2u category shown.
<span title="Delete" class="delete"></span>
<span title="Task Done!" class="done"></span>
<span class="handle"></span>
<span class="handle"></span>
</li>
<li>M2u category shown</li>
<li>M2u category shown</li>
</ol>
</div>
jQuery:
$('.note-body ol li span.check').click(function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().css({'text-decoration':'line-through', 'color':'#5b382e'});
});
$('.note-body ol li span.uncheck').click(function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});
RESOLVED:
Had to use the live(); because i am adding dom dynamically. Here is the final code (placed the styles in classes):
$('.note-body ol li span.check').live('click', function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().addClass('task-done').removeClass('task-notdone');
});
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().addClass('task-notdone').removeClass('task-done');
});

You are correct. Since the 'uncheck' class is dynamically added to the DOM, you need to use the jQuery live API. Try this:
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});

use jquery live or delegate as they are added runtime
http://api.jquery.com/live/
http://api.jquery.com/delegate/

Do you really need an uncheck class? Are there three states check, uncheck and 'nothing'? Getting rid of the uncheck class you could simplify your code.
I would do:
$('.note-body .some_other_identifier').live('click', function() {
$(this).parent().toggleClass('check');
});
Adding
.some_other_identifier {'text-decoration':'line-through'; 'color':'#5b382e'; }
.check .some_other_identifier { 'text-decoration':'none'; 'color':'#5b382e'; }
to your css.