Question

我有一个包含多行的表，这就是其中一行的样子：

<tr>
    <td>
        <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
        </div>

        <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
        </button>

        <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
        </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
</tr>

我希望在此div的第一个td内获取tr的值。我有相同的td按钮，当我点击它们时，我转到一个函数，我需要访问该函数中的行。

我试过以下

console.log($(this).closest("tr"));
console.log($(this).closest("tr").find(".div"));

但我一直在

[prevObject: m.fn.init[1], context: undefined]

我想要访问此行并访问上一行和下一行，但我无法看到我在这里出错的地方。

谢谢。

Answer 1

它不是.div。它只是div。 .div指的是element，其中包含div类。因此，您必须使用div

来引用div或entry_karma

$(this).closest("tr").find("div.entry_karma");

<强>更新

尝试

$(this).closest("tr").find(".entry_karma>h4").text();

要获得@wahwahwah所说的所需的价值，并获得previous和next tr，您可以按以下方式执行：

var prevTr=$(this).closest("tr").prev();
var nextTr=$(this).closest("tr").next();

Answer 2

您正在寻找带有class="div"的元素，但没有类似的内容。

console.log($(this).closest("tr").find("div"));

此div的值（或更好，内容）位于.html()或.text()。

console.log($(this).closest("tr").find("div").html());

Answer 3

你没有定义任何类名div。试试这样：

console.log($(this).closest("tr").find("div:first"));

Answer 4

您可以在jQuery中使用包含元素和类的父子选择器：

var child = $('td > .entry_karma');

child现在等于<h4>4</h4>，您可以在其中检索html并获取4

要获取父<tr>元素，您可以使用上面.has()代码段中的相同变量来使用jQuery var child = *选择器：

＆＃13;

var child = $('td > .entry_karma');

console.log(child.html());

// get parent tr
var parent = $('tr').has(child);

console.log(parent.html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="entry_karma" id="entry_karma_9">
        <h4>4</h4>
      </div>

      <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
        <span class="glyphicon glyphicon-arrow-up"></span>
      </button>

      <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
        <span class="glyphicon glyphicon-arrow-down"></span>
      </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
  </tr>
</table>

＆＃13;

或者，如果值始终嵌套在<h4>标记中，您可以直接访问它：

var val = $('td > .entry_karma > h4').html();

＆＃13;

var val = $('td > .entry_karma > h4').html();
console.log(val);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tr>
        <td>
          <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
          </div>

          <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
          </button>

          <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
          </button>

        </td>
        <td>Hello</td>
        <td>2014</td>
      </tr>
    </table>

＆＃13;

Answer 5

在按钮单击处理程序中，您可以将以下行用于当前行，下一行和上一行，以及div的内容：

var thisROW = $(this).closest('tr'),
    nextROW = thisROW.next(),
    prevROW = thisROW.prev(),
    div = $('div.entry_karma', thisROW).html();

$('button[id^="vote_down_"]').on('click', function() {
    var thisROW = $(this).closest('tr'),
        nextROW = thisROW.next(),
        prevROW = thisROW.prev(),
        div = $('div.entry_karma', thisROW).html();
    console.log( thisROW[0], nextROW[0], prevROW[0], div.trim() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
<tr>
    <td>
        <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
        </div>

        <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
        </button>

        <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
        </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
</tr>
    </tbody>
  </table>

Answer 6

只需将$('#res').click(function () { var resolutiontemp = {}; var resolution = []; $("input[name='resolution[]']").each(function () { this.value = this.checked ? 'on' : 'off'; var resolution = $(this).parent().find('span').text(); resolutiontemp[resolution] = this.value; }) resolution.push(resolutiontemp); console.log(JSON.stringify(resolution)); });替换为.div，然后找到最近的div，因为该按钮已位于第一个td内，如下所示：

td

P.S。：如果你使用console.log($(this).closest("td").find("div"));，它会找到所有现有的.closest('tr')（如果你有多个）。

如何使用jQuery从表中获取标记？

6 个答案: