Question

HTML页面（我无法编辑）包含一个表格，我想从中提取第一个td包含类别为“ targetClass ”的子元素的所有行。

例如，该表包含：

<tr>
  <td><span class="targetClass">Dog</span></td>
  <td>
    <p>Man's best friend.</p>
  </td>
</tr>
<tr>
  <td>Cat</td>
  <td>
    <p>Mouse's worst enemy.</p>
  </td>
</tr>
<tr>
  <td><span class="targetClass">Mouse</span></td>
  <td>
    <p>Timid cheese-loving creature.</p>
  </td>
</tr>

在这个例子中，我想要第一个和第三个。

所以我目前有一个Javascript文件，它使用jQuery load（）函数转到这个目标页面并使用“ targetClass ”类获取所有跨度并将它们放在div上调用Javascript的页面。我的Javascript是：

var newElement = $('<div>').load(url + ' .targetClass', function(response, status, xhr) {
    ... 
    alert(newElement.html());
    ... 
});

警告框显示一组跨度。但我想要做的是为每个跨度获得祖父母的tr元素。

我希望load（）函数的第一个参数中的选择器执行此操作：

$(".targetClass").parent().parent()

我尝试使用它作为选择器。它不起作用。

任何人都知道如何获取具有指定类的元素，而不是获得其祖父母？

Answer 1

以相反的方式做。不是匹配.targetClass然后上升，而是匹配tr然后向下。

var newElement = $('<div>').load(url + ' tr:has(.targetClass)', function() {
    alert(newElement.html());
});

Answer 2

load()只是$.get()的快捷方式，它会自动插入内容，如果您需要使用复杂的选择器或变量获取元素，则应使用$.get代替

$.get(url, function(data) {
    var newElement   = $('<div />'),
        grandparents = $(data).find(".targetClass").closest('tr');

    newElement.append(grandparents);
});

Answer 3

我会这样做：

var newElement = $('<div>').load(url, function() {
    var o = '';
    var trs = newElement.find('tr').each(function(){
                 o += $(this).find('.targetClass').closest('tr')[0].outerHTML;
              });
    alert(o);
});

Answer 4

您只能使用:has伪选择器，仅适用于jQuery。

var newElement = $('<div>').load(url + ' tr:has(.targetClass)', function() {
    alert(newElement.html());
});

现在它只会选择<tr>，如果它的任何后代（不仅仅是直接孩子）拥有.targetClass

类

请注意，由于您坚持，我已经向您推荐了上述内容。您可以在代码中执行相同的操作

使用jQuery load（）函数获取元素的祖父

4 个答案: