jQuery 中的 DOM 选择有问题答案

【问题标题】：Having issue with DOM selection in jqueryjQuery 中的 DOM 选择有问题
【发布时间】：2014-10-15 18:21:59
【问题描述】：

<div class="wrapper">
    <p class="text"></p>
</div>

<div class="wrapper">
    <p class="text"></p>
    <img></img>
</div>

<div class="wrapper">
    <p class="text"></p>
    <div class="vid"></div>
</div>

假设上面是用户帖子的列表，我想确定他们的帖子类型。要选择图像或视频类型很容易，例如视频，只需选择 $('.wrapper .vid')。

但是当我想选择明文类型的帖子时出现问题，因为class text也出现在视频和图像类型的帖子中。

【问题讨论】：

试试$('.wrapper').filter(…)
@Bergi 可以提供答案吗？
我不确定您对“纯文本帖子”的确切标准。这是否意味着唯一的子元素是p.text？或者这是否意味着既没有div.vid 也没有img 后代（直接孩子）？你决定。

标签： javascript jquery

【解决方案1】：

看起来你想要 wrapper 元素而不是 vid 或 img 然后

$('.wrapper').not(':has(img, .vid)')

如果你想要其中的text 元素

$('.wrapper').not(':has(img, .vid)').find('.text')

【讨论】：

我认为 OP 想要返回 .text。所以，应该是$('.text', $('.wrapper').not(':has(img, .vid)'))
@JoseRuiSantos 不，我不想退回它，只是想确定哪种类型的帖子是包装器。所以 $('.wrapper').not(':has(img, .vid)') 会做对吗？
@user3522926 将返回所有没有img 或vid 元素的wrapper 元素
@user3522926 如果您考虑在没有img 或.vid 元素的情况下发布.wrapper 的文本，那么是的，Arun 的这个答案应该没问题。

【解决方案2】：

您可以使用filter 获取三种不同类型的帖子。像这样的：

var $textPosts = $('.wrapper').filter(function() {
    return $(this).find('img, .vid').length == 0;
});

var $imgPosts = $('.wrapper').filter(function() {
    return $(this).find('img').length > 0;
});

var $vidPosts = $('.wrapper').filter(function() {
    return $(this).find('.vid').length > 0;
});

还要注意img HTML 标签是自闭合的，例如：

<img src="foo.jpg" title="Foo" />

【讨论】：

【解决方案3】：

如果我做对了，您希望在 <p> 中使用课程文本进行所有测试，那么您可以这样做

$('.wrapper > .text').html()

上面的代码只会给你直接在类“包装器”下的那些具有类“文本”的元素的内容

【讨论】：

【解决方案4】：

您可以使用.filter() 过滤掉类为text 且没有兄弟的元素：

var text = $('.text').filter(function() {
    return $(this).siblings('*').length == 0
}).text();

Fiddle Demo

【讨论】：

【解决方案5】：

你可以使用

  $('.wrapper p.text').text()

fiddle demo

【讨论】：