We Keep Coding

Select an image source in a list with a style in jQuery

I have this code in HTML :
<div id="thumbs_list">
<ul id="thumbs_list_frame">
<li id="thumbnail_260" style="display: none;">...</li>
<li id="thumbnail_261" style="display: none;">...</li>
<li id="thumbnail_262" style="display: none;">...</li>
<li id="thumbnail_264" style="display: list-item;">
<a href='mywebsite.com'>
<img src="myphoto.png" alt="Photo"/>
</a>
</li>
<li id="thumbnail_266" style="display: none;">...</li>
</ul>
</div>
I'm looking to get the source of the image who is in <li> with style="display: list-item;" (myphoto.png) with jQuery but I don't know how to do...
I tried this :
var firstThumbnailDisplay = $('#thumbs_list_frame li').css('display') == 'list-item';
var img = firstThumbnailDisplay.find("img").first().attr('src');
But it doesn't work.

This should work:
var src = $("#thumbs_list_frame li").filter(":visible:first").find("img").attr("src");
It finds the first visible (style not set to display: none;) li and gets the src attribute of the image inside it.

Use the :visible selector.
var firstThumbnailDisplay = $('#thumbs_list_frame li:visible')

Use :visible to find the one that is displayed and after with .find() and .attr() to acheive your goal.
var src = $('.result').html($('#thumbs_list_frame li:visible').find('img').attr('src'));
Here's a fiddle

//declare an array (there could be multiple)
var listItems = [];
//Loop the items
$('#thumbs_list_frame li').each(function() {
var $this = $(this);
//check for value
if ($this.css('display') === 'list-item') {
//push item into array
listItems.push($this);
}
});
//listItems now contains all list items with display:list-item;
Fiddle

Loop through an unordered list using Javascript

I'm having a bit of a struggle to loop through an unordered list, that is produced by kendo-ui. Looking at its markup, it looks like this:
<ul data-role="listview" data-style="inset" data-type="group" id="unitlist">
<li>
<li>
<ul>
<li id="signalRconveyanceId-P32-HMU-01">
<a href="/UnitDetails/Index/1">P32-HMU-01
<span class="statusicon" style="background-color: #468847"></span>
</a>
</li>
<li id="signalRconveyanceId-P32-HMU-02">
<a href="/UnitDetails/Index/2">P32-HMU-02
<span class="statusicon" style="background-color: #b94a48"></span>
</a>
</li>
<li id="signalRconveyanceId-XOS-STAGING">
<a href="/UnitDetails/Index/3">XOS-STAGING
<span class="statusicon" style="background-color: #468847"></span>
</a>
</li>
<li id="signalRconveyanceId-NWI-100">
<a href="/UnitDetails/Index/4">NWI-100
<span class="statusicon" style="background-color: #"></span>
</a>
</li>
</ul>
</li>
</li>
</ul>
My javascript looks like this:
var listItems = $("#unitlist li");
listItems.each(function(li) {
console.log(li);
});
I can get the rows out of the list allright, but all I get out of them is their index number, which in this case is [0, ..., 6].
What I really need is to fetch the id-part signalRconveyanceId-XXYY for each list element. How would I be able to do that?

Try to use jquery attr() like,
var listItems = $("#unitlist li");
listItems.each(function(li) {
console.log($(this).attr('id'));
});
As your HTML shown you should select list item like
var listItems = $("#unitlist li ul li");
Updated
var listItems = $("#unitlist li ul li");
listItems.each(function(index,li) {
console.log(li.id);
});
Updated fiddle

In your code li is not actually the element - it's the index. You can refer to each of the li elements using this...
var listItems = $("#unitlist li");
listItems.each(function() {
console.log(this.id);
});

I got this:
var listItems = $("#unitlist li");
listItems.each(function(li) {
$id = $(this).attr('id');
console.log($id);
});
http://jsfiddle.net/lharby/cTEHY/

Keyboard navigation on nested list using only javascript

I have a ul list as follows. I am new to JS and trying to do a keyboard navigation, just the arrow keys using only javascript.
<ul id= nav>
<li class =subnav id =sub1> Companies
<ul id = hidden>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</li>
<li class =subnav id =sub2> LINKS
<ul id = hidden>
<li> item 4 </li>
<li> item 5 </li>
<li> item 6 </li>
</ul>
</li>
</ul>
my JS:
ul = document.getElementById("nav");
li = ul.getElementsByClassName("subnav");
ul2 = document.getElementById("hidden");
li = ul.getElementsByTagName("li");
function keyPress(e)
{
var e = e||window.event;
e =e.which||e.keyCode;
for( var i=0; i<li.length; i++)
{
var f = li[i].childNodes[0];
if(li[i].children.length > 0)
{
for(var j=0; j<li2.length; j++)
{
var x = li2[j].childNodes[0];
}
}
else
{
alert("no child nodes");
}
}
}
I am trying to set focus on the first item and then moving to each nodes using keys.

I suggest using jwerty, awesome keyboard events library.
I used jQuery and jWerty plugin.
Here is a quick JSFiddle: (Click the preview window and start hitting the down key)
http://jsfiddle.net/8QZrV/
As a basic idea, you should create an object with all the elements and then iterate through them, my basic example was like this:
var i = 0;
j = jQuery('.navigator li').length;
And then you hook it up in jwerty, I guess you want to make some actions there, so I guess you should also .focus() the current element.
Enjoy!

How do I add a class to inner HTML of a div using Javascript?

I'm trying to work around a seemingly impossible customization for Wordpress. Here is what <?php the_category();?> prints out:
<ul class="post-categories" >
<li>
<a rel="category-tag" title="..." href="...">Category One</a>
</li>
<li>
etc.
</li>
</ul>
I need to add / insert a class into all the <a>'s, to make it look like this:
<ul class="post-categories" >
<li>
<a class="btn" rel="category-tag" title="..." href="...">Category One</a>
</li>
<li>
etc.
</li>
</ul>
So far, I've only found ways to assign additional classes to elements with an existing ID or class.
Thanks, in advance, for your help!

Using jQuery:
$(".post-categories a").addClass("btn");

Since the title says Using JavaScript
Try this for a JavaScript solution:
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
if (links[i].parentNode.className == "post-categories")
{
links[i].className = "btn";
}
}
Or if you're down with the kids and you can use jQuery, you can do:
$(".post-categories > a").addClass("btn");

use jquery
$(function() {
$(".post-categories a").addClass("btn");
})

How to save HTML ul-li structure into javascript object

i have this following html structure usilg ul and li.
<ul class="treeview" id="productTree">
<li class="collapsable lastCollapsable">
<div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
<span id="top1" class="">top1</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mod1</span>
<ul>
<li class="last">
<span>bottom1</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsable lastCollapsable">
<span id="top2" class="">top2</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mid2</span>
<ul>
<li class="last">
<span>bottom2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
the website allows user to add more data under this structure and am using jquery treeview to show the tree structure dynamically.
Now i need to save this whole ul-li structure into a js object for future use in the website. how do i achieve this? the last node("bottom1 and bottom2 here") has a class "last" if that helps.
as we can add data dynamically we can be sure how much levels of ul li is there at the end when user clicks "save"

You can use recursive function to save a tree object;
function save(obj_ul, tree){
var obj_lis = obj_ul.find("li")
if (obj_lis.length == 0) return;
obj_lis.each(function(){
var $this = $(this);
if($this.parent("ul").get(0) == obj_ul.get(0))
{
tree.push({
name : $this.find('> span').text(),
child : save($this.find("ul").first(), [])
});
}
});
return tree;
}
console.log(save($('#productTree'), []));

If you want to reprouce the same thing verbatim, as a string of HTML elsewhere on the site, you could just do this? Then .append() or .prepend() treeview where you like.
​var treeview = $('#productTree').parent().html()

Assuming you want JSON:
function save(){
var tmp = [];
$('#productTree li.collapsable').each(function(){
var $this = $(this),
$spans = $this.find('span'),
o = [];
$spans.each(function(){
o.push($(this).text())
})
tmp.push(o);
});
return tmp;
}
You could also use map() to accomplish the same thing, too.
EDIT: Updated, assuming your text will live inside a span. This will create an array of arrays, each containing the text from the spans inside each of your list-items.