Develop Reference

Wrap the id of list item and save it in table td

I have a list of items inside table cells, in each cell I have a list item.
What I want?
When I save the table I want to save the id of each list item into the cell that the list item inside it.
Like this:
<td><li id='itemID'>contents</li></td>
and I want to save this:
<td>itemID</td>
Any way to do that?

Use .find() and .attr() as shown below.
$("td").each(function(){
$(this).text($(this).find('li').attr('id'));
});
Fiddle

An important point to note is that your HTML is invalid. You cannot have an li element as a child of a td, it must be contained in either an ul or ol.
Once you've fixed that you can provide a function to text() which you call on the td. You can then traverse the DOM and return the id of the child li - assuming there is only one, or you only want to read the id of the first one found:
$('td').text(function() {
return $(this).find('li').prop('id');
});

Insert a div-like element inside a table without applying table layout

I have a table (render by datatable) and I need to dymatically append some new elements inside the table like :
The dark grey area is a new dom elements that I need to dynamically insert.
The first row is a title that is NOT align with the th/td, which now becomes a problem to be solved
I tried inserting a div that wrap the title inside the table, but the table seems to treat it as a td:
We can see that the first row is apparently become much wider , which is not I want.
Is there a simple way to insert something inside but without treat it as td?
Here is a fiddle to demonstrate what I am faced with :http://code.hcharts.cn/jaskey/hhhGXD

Not able to update your fiddle, try this code
$(function () {
$('#btn').off('click').on('click',function(){
console.log('click');
$('#table').find('tr:first-child').after('<tr><td colspan="5"><div>Here I insert a din just after the th, which will be consided as a td ,which breaks the existing layout</div></td></tr>')
});
});
also ensure that you have given specific width to td's or tr if you don't want them to spread out.

Appending paragraphs to an image attribute in order? (1st to 1st, 2nd to 2nd ... nth to nth) JQUERY

I have made a division of paragraphs with information in each. I also have a division of images.
My goal is to use jquery to append the text in each paragraph to an attribute in each image called 'data-description'.
So the first paragraph put in the 'data-description' attribute for the first image, and the second paragraph put in the 'data-description' attribute for the second image, etc...
For instance this code will do it just for the first:
$('#galleria :first-child').attr('data-description', $('#descriptions :first-child').text());
..given that the #galleria div contains the images, and the #descriptions div contains the text.
I've attempted to use a variable which increases each time, or classes which apply to each in sequence, or arrays, but I've had no joy.
I hope this explanation makes some sense!
I'd appreciate any thoughts, thanks.

Try this:
$('#galleria img').each(function(i){
$(this).attr('data-description', $('#descriptions p:eq('+i+')').text());
});
Explanation:
I use $('#galleria img').each to execute a function for each image tag. The variable named 'i' is equal to the current element index in the list. Then, I retrieve the "i"-th p tag into #descriptions and I put it in the data-description tag of the current image.
I hope it makes sense.

Try this
$('#galleria img').each(function(k,v){
$(this).prop('data-description', $('#descriptions p').eq(k)').html());
i = i + 1;
});

jQuery: Style all empty child TDs only if the first (:first) TD contains no text (:empty)

I need some jquery code to style all empty child tds only if the first td contains no text.
Right now my code styles all empty TDs as a greyish color (see image).
I only want the first row to be styled because the first TD contains text. In other words, I need to test if the first TD contains text and if so, add the grayish color on that row, if it is blank then don't add the coloring to the empty TDs.
jsbin for the above code:
http://jsbin.com/ojemuf/1/edit

Select rows, check if first child not is empty, get its matching siblings:
$('tr td:first-child:empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
$('tr td:first-child:not(:empty)').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
Apparently I had it backwards!

I hope I'm understanding your question right
loop trough the tr elements and if the first is not empty add a color to the empty td's inside the tr element
$('tr').each(function () {
if(!$(this).find('td').first().is(':empty'))
$(this).find('td:empty').css('background', '#ccc');
});
--- edit ---
Reversed edition of Mathletics
$('tr td:first-child').not(':empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");

The question is a bit unclear whether you want to update the entire table when the first element is not empty or if you want to update every matching row. For the entire table, you can try this:
$("td:first:not(:empty)")
.closest("table")
.find("td[class*='_crew']:empty")
.css("background", "#DDCEC0");
From the description, it seems the other answers missed the fact that he wants this applied when the first element is NOT empty.

Get all the elements inside a div which are tabable in dom tree order

I have a requirement to handle all the elements inside a DIV. Elements must be tabbable. i am trying like this
jQuery("#container a,:input:not(:hidden)")
But it is fetching me all the input elemnts on the page. how to get the elements(a,:input:not(:hidden)) inside this div. TIA

When you're doing :
jQuery("#container a,:input:not(:hidden)")
^ (1) ^ (2)
There you're searching in the container, the a element.
You're searching not hidden :input (pseudo-classes input does exists ?) in the whole page !
Try this one :
jQuery("#container a, #container input:not(:hidden)")