问题
I'm building somewhat of a different website, below is my HTML markup and my question. Please don't be put off by this wall of text, I'm sure it's really not a difficult problem for someone who know's their stuff but it takes some explaining.
<div id="0" class="cell" style="top: 0px; left: 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr id="0">
<td id="0"> </td>
<td id="1"> </td>
<td id="2"> </td>
<td id="3"> </td>
<td id="4"> </td>
<td id="5"> </td>
<td id="6"> </td>
<td id="7"> </td>
<td id="8"> </td>
<td id="9"> </td>
<td id="10"> </td>
<td id="11"> </td>
<td id="12"> </td>
<td id="13"> </td>
<td id="14"> </td>
<td id="15"> </td>
</tr>
<tr id="1">
<td id="0"> </td>
<td id="1"> </td>
<td id="2"> </td>
<td id="3"> </td>
<td id="4"> </td>
<td id="5"> </td>
<td id="6"> </td>
<td id="7"> </td>
<td id="8"> </td>
<td id="9"> </td>
<td id="10"> </td>
<td id="11"> </td>
<td id="12"> </td>
<td id="13"> </td>
<td id="14"> </td>
<td id="15"> </td>
</tr>
</tbody>
</table>
</div>
This markup is repeated in a tiling sort of pastern in order to fill the entire page. A similar DIV might be:
<div id="1" class="cell" style="top: 144px; left: 0px;">
<!-- The rest of the table code here... -->
</div>
If you can't see it already, I'm creating a load of cells across the entire page sorted into DIVs. Now, when a user clicks into a cell (one of the <td>'s), I want to get it's co-ordinates represented by: 0, 1, 5.
In this example, 0, 1, 5 is the DIV with id of 0, the TR element inside that DIV with the ID of 1, and lastly the cell inside that TR element with an ID of 5. I wanted to write a javascript function to get these co-ordinates, but I am at a complete loss on what parameters to pass, and little idea how I can get out the co-ordinates.
From as far as I can think once I can pass a click event(?) to the function I can look at the <td>'s parent elements and get their IDs?
If anyone can provide a solution to this problem or provide any input, it'd be greatly appreciated.
回答1:
Use the closest jQuery function, which returns the parent element that you specify.
Like this:
$("td").click(function () {
var parentDIVId = $(this).closest("div").attr("id");
var parentTRId = $(this).closest("tr").attr("id");
var myId = $(this).attr("id");
}
回答2:
Since it is not valid to begin an ID with a number, I'll offer a different solution.
Since your IDs are basically index numbers, you can use jQuery's .index() method to get what you need.
Test it here: http://jsfiddle.net/hBarW/
$('td').click(function(){
var $th = $(this);
var td_idx = $th.index();
var tr_idx = $th.closest('tr').index();
var div_idx = $(this).closest('div').index();
alert(td_idx + ' ' + tr_idx + ' ' + div_idx);
});
回答3:
try
$('td').click(function(){
var td = this.id;
var tr = $(this).closest('tr').attr('id');
var div = $(this).closest('div').attr('id');
});
you can test it here.
more on .closest() here
回答4:
the easy thing would be
$('td').click(function(){
$this = $(this);
alert( $this.closest('div').attr('id') + ',' + $this.closest('tr').attr('id') + ',' + $this.attr('id'));
});
But you have some issues..
- you cannot have numbers as IDs
- IDs should be unique inside the DOM ...
来源：https://stackoverflow.com/questions/3154532/getting-the-co-ordinates-of-a-td-cell-using-jquery