jquery用class找到以前的td

时间:2014-12-08 23:57:37

标签: jquery

我正在尝试使用jQuery查找带有类名的第一个前一个td,并给我该表格单元格的内容。

我不断将[object Object],result或undefined作为结果而不是html。

这是一个js小提琴http://jsfiddle.net/pms6p9j3/1/

$(document).on('click', '.Add', function (event, ui) {
    var classid = $(this).closest('tr').attr('id');
    var name = $(this).closest('td.itemName').html(); /* ISSUE */
    $('#cart .order-list').append('<li id="' + classid + '" name="' + classid + '"><div class="order-list-name">'  + name + '-' + classid + '</div></li>');
});

我已尝试过以下以及我在网上找到的其他几个例子。

var name = $(this).prevAll('td.itemName:first').html();

有人能指出我正确的方向吗?

编辑:

这里要求的是HTML

<table>
    <tr id='1'>
        <td>blah</td>
        <td class='itemName'>Item 1</td>
        <td>blah Blah</td>
        <td><a href='#' class='Add'> + </a></td>
    </tr>
    <tr id='2'>
        <td>blah</td>
        <td class='itemName'>Item 2</td>
        <td>blah Blah</td>
        <td><a href='#' class='Add'> + </a></td>
    </tr>
</table>

<div id="cart" style="margin-top:80px;"> 
            <form action="" method="post">
                <div class='block-info-left'>

                </div>
                <ul class="order-list"> 

                </ul> 
            </form>
        </div> 

3 个答案:

答案 0 :(得分:1)

看起来这是遍历DOM所需的内容。

var name = $(this).parent().siblings('td.itemName').html();

以下是它的工作原理:

  • $(this)指的是<a>
  • .parent遍历<td>父母。
  • .siblings使用指定的选择器遍历兄弟<td>

更新了JSFiddle

答案 1 :(得分:0)

在我看来,您可以获得td标记,该标记是最接近tr的子项并且具有itemName类。

$(document).on('click', '.Add', function (event, ui) {
  var tr_tag = $(this).closest('tr'),
      classid = tr_tag.attr('id'),
      name = tr_tag.children('td.itemName').html();

  ...
});

旁注:您应该在函数开头有一个var。它适用于任何地方,但这就是JavaScript中真正发生的事情。

children()仅搜索标记的直接子项。使用find()函数搜索所有后代。

答案 2 :(得分:0)

你可以这样做:

$(document).on('click', '.Add', function (event) {
  var tdElements = $(this).parent().siblings();
  for(var i=tdElements.length-1; i >= 0; i--) {
    if(tdElements[i].className) {
      //has a className and is the "most previous"
    }
    else{
      //has no className
    }
  }
});

这会迭代td元素并找到最近的带有className

的td
相关问题