javascript - 获取表格单元格的 HTML，然后从中删除某些元素

Question

好吧，由于某种原因，我似乎无法得到我需要的东西。我很接近，但由于某种原因，无法将最后一块拼图放在一起。

HTML：

<table>
  <tr>
    <td>
      <a href="/path/to/larger/image.jpg"><img src="/path/to/image.jpg"/></a>
      <br/>Some caption <a href="http://somesite.com">text</a>.
    </td>
   </tr>
</table>

JavaScript：

$(function(){
  $('.fancy-gallery td > a').each(function(){
    var title = $(this).parent().html();
    $(this).attr('data-fancybox-title', title);
    $(this).attr('data-fancybox-group', 'group-' + $(this).closest('.textarea').attr('id'));
  });
});

所以这给了我 TD 中的所有内容，包括第一个锚点和图像。我尝试过使用 .remove()，但没有用，我也尝试过使用 .not，但也没有用。

基本上我需要做的是删除第一个<a/>标签和任何换行符（如<br/>）。然后将其分配给 data-fancybox-title 属性。

任何帮助表示赞赏。

Answer 1

克隆 td，删除锚标记，然后获取文本。

$(function(){
  $('.fancy-gallery td').each(function(){
    var title = $(this).clone().find("a").remove().end().text();
    $(this).attr('data-fancybox-title', title);
    $(this).attr('data-fancybox-group', 'group-' + $(this).closest('.textarea').attr('id'));
  });
});

Answer 2

I found the answer. Thanks to @KevinB for helping get me started down the right path. Here is the answer for those looking to do the same:

$(function(){
    $('.fancy-gallery td').each(function(){
        var title = $(this).clone().find('a:has(img), br').remove().end().html();
        $(this).children('a').has('img').attr('data-fancybox-title', title).addClass($(this).attr('id'));
    });
});

Answer 3

使用.text代替.html

var title = $(this).parent().text();