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>

Select elements from first level

I have this ul li list:
<ul>
<li><div>Text</div>A</li>
<li><div>Text</div>B</li>
<li><div>Text</div>C</li>
<li>
<ul>
<li><div>Text</div>A1</li>
<li><div>Text</div>B1</li>
<li><div>Text</div>C1</li>
<li><div>Text</div>D1</li>
</ul>
</li>
<li><div>Text</div>E</li>
</ul>
I need to choose all "li" element from the first level.
In this example it will be:
<li><div>Text</div>A</li>
<li><div>Text</div>B</li>
<li><div>Text</div>C</li>
<li><div>Text</div>E</li>
Trying to use:
$('ul').children()
I get all "li" elements from the first level and second level.
Thank you very much.

Select li of ul:first which doesnot has a ul element as child.
$('ul:first').children('li:not(:has(ul))');
Fiddle

You can use following code which will search for 1st ul and then all li's:
$('ul:first>li')

You can add a class to the first ul and then call .children()

try
$('ul>li').css(//your doing//);
This will select the direct childs of the all ul tags in your code.
If you want to acess specific ul, try givig it a class or id.

Give the external ul a class:
<ul class="my_ul">
....
</ul>
and in jquery you an get them like:
$('.my_ul').children()
EDIT: my first code was getting al children.

You could change your selector to
$("'whatever element is above first level ul element' > ul > li")

Add/Remove Class of a link with jQuery inside a nav ul li h4

I have 5 a link items in a row, encapsulated within a h4 and the h4 within li element and the li within ul which it's finally nested in a nav element.
At the moment, the role of a (thanks to a very helpful example that I found here) when clicked is to change the content of the divs (that contain images and text).
What I would like to do in addition, is that when you click the link and the content changes, I would like a link to receive the "active" class, which has white color and certain other css attributes.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
the function that swaps the content
<nav id="nav2">
<ul class="tabz">
<li><h4>Szenario 1</h4></li>
<li><h4>Szenario 2</h4></li>
<li><h4>Szenario 3</h4></li>
<li><h4>Szenario 4</h4></li>
<li><h4>Szenario 5</h4></li>
</ul>
</nav>
When the page loads, everything displays correctly. When I click the second link I would like the "active" class to be removed from first link and go to the sencond.
(The css of the active class is just some color and border differences.)
Thank you very much in advance.

Attach handler for those anchor tags by using the attribute starts with selector, since you are having href with same beginning. And by using the $(this) reference set the active class and remove the active class from all of its anchor siblings.
Try,
$('[href^="#tabs"]').click(function(){
$(this).addClass('active');
$(this).closest('.tabz').find('a').not($(this)).removeClass('active');
});

$('[href^="#tabs"]').click(function(e){
$(this).addClass('active').parents('li').siblings().find('a').removeClass('active');
});
With the markup you have, the clicked a element won't have any sibling, but its li parent will, so this code will work as expected, see here : DEMO

Add return false to parent link only with jQuery

I have a list inside a toggled div...
<li>
Link
<ul stlye="display:none;">
<li>Child Link</li>
</ul>
</li>
Ive written a piece of jQuery to toggle the display of the child UL only when a child link is clicked it no longer works (It doesnt go through to google), can anybody see where im going wrong?
// Dropdown
$('.archives ul li a').click(function(){
$(this).parent().find('ul').slideToggle();
return false;
});

STYLE is spelled wrong.
stlye=
From your post's title it appears you want something like this...
$('.archives ul li a').click(function(){
var $children = $(this).parent().find('ul');
$children.slideToggle();
return $children.length > 0 ? false : true;
});
Return will be false only when child ULs are found.

Assuming what you've shown is inside a ul which is in turn inside an element with class archives, then the selector .archives ul li a matches both the parent and child anchors, because you've used a descendant selector, and so your handler gets called for the child, and the return false; prevents it from doing its default action (following the link).
If your goal is to have the handler triggered only for the earlier link and not for the child link, then you may need to be more specific. You haven't shown enough of your markup for us to help you be more specific, though. If I assume your markup looks something like this:
<div class="archives">
<ul>
<li>
Link
<ul style="display:none;">
<li>Child Link</li>
</ul>
</li>
</ul>
</div>
...then the selector to match only the "Link" anchor and not the "Child Link" anchor would be .archives > ul > li > a (e.g., using direct child selectors).
Also note that you had stlye rather than style, but I assume that's just a typo in the question. (Why don't people use copy and paste?! ;-) )

The ChildLink is also matched by your selector, and in the click handler you're preventing the default action (which would be "navigate to Google").
So you should adapt your selector to only get the toggle Link, or you use this:
$('.archives ul li a').click(function(e){
if ($(this).siblings('ul').slideToggle().length) // if we found a list to toggle
e.preventDefault(); // or return false
});

Since your return false statement is cancelling the default link action, you need to be more specific so that you don't target the links that want to allow to continue to function.
Try this:
$('.archives > li > a').click(function () {
$(this).parent().find('ul').slideToggle();
return false;
});
jsFiddle example
By using the > child selector and changing the target to only the immediate child links of the outermost list, the sublinks won't be selected and will continue to work. In your code your $('.archives ul li a') will apply to any child links, not just the top level.

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.