We Keep Coding

JQuery Prepending text in front of a link

I have a unordered list with links and sublinks. I'd like to prepend a '»' character in front of the sublinks in the list. I could probably do this with CSS via list-style-image:url but I'd rather just have text. So far I have tried prepend without much success.
HTML:
<nav>
<ul>
<li>link 1</li>
<li>link 2</li>
<ul>
<li>sublink link 1</li>
<li>sublink link 2</li>
</ul>
<li>link 3</li>
</ul>
</nav>
And I am using this code:
$("ul li li").each(function() {
$(this).closest('li').prepend("»").html();
});
If I take away one level of list items and prepend to all list items, then it works but viewing in web inspector, the » character still has quotes around it. I also tried various incarnations of what appeared for closest such as li a but that did not make a difference either. I'm not getting any syntax errors so not sure what I am doing wrong.
I have a Fiddle here.

Why not some css?
ul ul li:before {
content: '»';
}
Using JavaScript to modify the UI for something like this is a waste of resources. This is subjective without knowing your actual use case.

Your selector is not correct, also there is no need to use html and each methods.
$("ul ul li").prepend("»");

You had an incorrect selector ul li li implied there was an li directly within an li but there is another ul between.
In addition you don't need to use a .each for that as jQuery will return the reference to the set of elements which matched the selector.
$("ul ul li").prepend("»");
DEMO
Mind you the CSS solution from Aknosis looks very cool.

I think this is what you are needing:
$("ul ul li").prepend("» ");

Try:
$("ul li").each(function() {
$(this).prepend("»").html();
});

Filter method jQuery

Please help me out with the following code. I don't understand it. I have to use a snippet like this in my project.
$('strong', this) <- this part is not clear to me at all.
Please be kind enough to explain the whole code line by line if possible.
<ul>
<li><strong>list</strong> item 1 -
one strong tag
</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span>
</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
JavaScript:
$('li').filter(function(index) {
return $('strong', this).length == 1;
}).css('background-color', 'red');

$('strong', this) is jQuery selector with $(target, context) format.
According to your code:
this refers to li and $('strong', li) is searching a <strong> that within that li tag.
This statement can also be written as:
$(this).find('strong') and from jQuery library code you'll see that:
$(target, context) format internally implement the
$(context).find(target) process.
For more see here.

The code is basically getting a list of li elements using the jQuery $('li') (this will get all <li> ... </li> tags on the page)
It then reduces this set with the .filter function, filter takes a function as an argument, the function is called on each element in the list, if it returns true the element is returned in the list from filter if it return false the item is ignored.
In this context the function calls $('strong', this).length == 1 where this is the li tag that currently being decided checked by the filter, as mentioned in other answers it's simply checking returning the list of <strong>..</strong> tags in the current li. If there is not strong in the current li, length is 0 so the function returns false, this means the filter wont return that element in the list it produces, it then moves on to the next li.
this means the the first part of the code simply produces a list of li's with a strong tag in them, this is then chained with the css function which colours all those tags in red.
Hope that helps.

Finding out list text when a connected sortable is clicked

I have connected sortable list and I want to have a callback function for double click on the list elements. Is there a standard way to figure out what is the html/text content of the item that was clicked? I am doing the following on chrome but it does not work on Firefox.
//when element is dropped in connected sortable
ui.item[0].ondblclick = wordClicked;
function wordClicked(e) {
console.log(e.srcElement.innerText);
}

I would use jQuery methods as jQuery is built to work on all browsers.
For your double click event handler you can use this http://api.jquery.com/dblclick/
And to get the text of an element you can use this http://api.jquery.com/text/
I've created this jsFiddle that shows how both methods work http://jsfiddle.net/davew9999/7cQXX/
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="result"></div>​
JavaScript
$("ul li").dblclick(function() {
$("#result").text("You double clicked " + $(this).text());
});​

fox not supports 'innerText' in this situation

Getting an element in Javascript - but what element # is it within the document?

I've got a set of elements that, on click, I want to change colour. Now, I have a colour assigned to each of them (ie, if it's the first one in the list then this colour, if it's the second then a different colour...) but how do I check which one they are? Like, if I click on the third, how do I know it was the third? Is there a javascript method for it or even a jQuery method?
Thanks

If they're siblings:
$(this).index();
This returns a 0-based index, so the third is 2.
If they're not siblings, cache the set:
var els = $('.my_group_of_elements');
Then do this:
els.index( this );

jQuery has an .index() method, that should do what you want.
Example: http://jsfiddle.net/au2fQ/
HTML
<ul id="Test">
<li>Click Me</li>
<li>Click Me</li>
</ul>
<ul id="Test2">
<li>Click Me 2</li>
<li>Click Me 2</li>
</ul>
JS
$('li', '#Test,#Test2').click(function(){
var i = $(this).index(),
k = $(this).index('li');
alert('This is li '+i+' in the ul. This is li '+k+' in the page.');
});

Jquery child selector vs. .each

Given the following example table:
<ul class="topnav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
What are the differences between:
$selector1 = $('ul.topnav > li');
and
$selector2 = $('ul.topnav').each();
EDIT:
$selector2 = $('ul.topnav li').each();

The first will contain all li's which are a direct child of ul.topnav, the second will contain all ul.topnav elements.

$('ul.topnav > li') will select all <li>s directly under the ul.
each should take a function as a parameter, and iterate over all matched <ul> - it doesn't not take the children <li>s. If anything, you want $('ul.topnav').children(), which is identical if the ul only contains li elements anyway.
For example, this will alert the number of children each list has (in your case, only the number 3)
$selector2 = $('ul.topnav').each(function(){
alert($(this).children().length);
});
Also see the jquery API.

The second one will evaluate them individually, whereas the first one will evaluate them as a group