获取隐藏span标记的文本值

Question

我有一个包含数据列（名称，年龄，电子邮件）的表格，我有一个隐藏的模态窗口，只有当用户点击每行旁边的“详细信息”时才会显示。

需要在模态中填充的数据位于隐藏的span标记中，其中包含hide-name等类。

HTML：

<tr class="xrow row-2">
<td>Fisher, Baker</td>
<td>2 notes</td>
<td><a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a></td>
<span class="hide hidden-name">Fisher, Baker</span>
<span class="hide hidden-date">2014-03-20</span>
<span class="hide hidden-time">14:00:00</span>
</tr>

这是我使用的JS，但是当我调用name变量时它什么也没有返回。

$('.xrow').on("click", '.btn-review', function () {
    var name = $(this).closest('span.hidden-name').text();
    // alert(name);
}

Answer 1

你的代码中的this引用了.btn-review元素而不是tr ，你应该首先选择最接近的tr元素：

var name = $(this).closest('tr').find('span.hidden-name').text();

编辑：你的标记无效， tr元素只能有td子元素，你应该用td元素包装span元素，浏览器会以不同的方式呈现这个标记。 更改标记后，上述代码段应该可以正常工作。

我建议将span s移动到具有按钮的td元素，然后使用$(this).siblings('span.hidden-name').text()比使用closest更有效然后find 。

<tr class="xrow row-2">
    <td>Fisher, Baker</td>
    <td>2 notes</td>
    <td>
       <a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a>
       <span class="hide hidden-name">Fisher, Baker</span>
       <span class="hide hidden-date">2014-03-20</span>
       <span class="hide hidden-time">14:00:00</span>
    </td>
</tr>

Answer 2

我想我已经想到了你想要的东西：

$('.xrow').click(function () {
    var name = $(this).find('span.hidden-name').text();
})

您只需在所单击元素的内容中搜索所需的元素即可。

Answer 3

你应该用任何td包裹你的跨度。 例如最后一个td。

<td>
<a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a>

<span class="hide hidden-name">Fisher, Baker</span>
<span class="hide hidden-date">2014-03-20</span>
<span class="hide hidden-time">14:00:00</span>
</td>

你可以达到：

$('.xrow').on("click", '.btn-review', function () {
    var name = $(this).parents('.xrow').find('span.hidden-name').text();
    alert(name);
});

http://jsfiddle.net/V4z8S/2/