Question

如果我有以下代码并且用户要使用jQuery单击删除按钮，我将如何获得该组的名称（下例中的测试组）？如果有人怀疑，那是因为我想显示一个确认框，其中包含即将被删除的组的名称。

<td class='title column-title'>Test Group
    <div class="row-actions">
        <span class='delete'>
            <a id="single-delete" href="?page=permissions-options-eidtor&action=delete&action_role=test_group&role=&paged=2&message=3">Delete</a>
        </span>
    </div>
</td>

Answer 1

尝试这样的事情;

$(document).ready(function() {

  $('#single-delete').click(function() {
     $(this).closest('.column-title').text(""); // UPDATE: Won´t work as text() returns all inner text.
  });

});

<强>更新

您的链接#single-delete应该有一个类，但您也可以使用选择器.delete a，最好用span这样的<span class="label">Test group</span>或者类似的方式包装文本

更新2

$('.delete a').click(function(e) {

    var group = $(this).closest('.column-title').find('.label').first().text();
    return confirm('Are you sure you want to delete the group "' + group + '"?');

});

Answer 2

$('#single-delete').click(function() {
   $(this).parents('.column-title').text();
});

Answer 3

如果这是动态链接，我建议为您的a元素添加自定义属性：

<td class='title column-title'>Test Group
    <div class="row-actions">
        <span class='delete'>
            <a id="single-delete" actionrole="test_group" href="...">Delete</a>
        </span>
    </div>
</td>

在您的确认中，您可以使用：

var text = 'Delete group ' + $('#single-delete').attr('actionrole') + '?';
var result = confirm(text);

如果不能这样做，你可以提取链接的href属性，然后用正则表达式提取参数。

<强>更新

请参阅this example on jsFiddle

Answer 4

匹配<td>祖先并获取其内部text()将无法正常工作，因为返回的值还将包含所有后代元素的内部文本，包括链接。

您可以使用contents()和filter()来隔离<td>元素的文本节点子节点，然后将其值与map()和{{3连接起来}}：

$(".delete a").click(function() {
    var group = $(this).closest(".column-title").contents().filter(function() {
        return this.nodeType == 3;
    }).map(function() {
        return this.nodeValue;
    }).get().join("");

    // Now do something with 'group'...
});

Answer 5

我不确定'删除其中的组'是什么意思，但我可以告诉我们如何使用以下代码跟踪'test_group'参数，即'action_role'：

<script type="text/javascript">
 $(document).ready(function(){
  $('#single-delete').click(function() {
     console.log($(this).attr("href").split('&')[2].split('=')[1]);
  });
 });
</script>

单击链接时获取TD字段的值

5 个答案: