在jquery中选择DOM时遇到问题

Having issue with DOM selection in jquery

本文关键字：遇到 问题 DOM 选择 jquery      更新时间：2023-09-26
<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也出现在帖子的 vid 和图像类型中。

看起来你想要wrapper元素，这些元素不会vid或img

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

如果你想要其中的text元素

$('.wrapper').not(':has(img, .vid)').find('.text')
您可以使用

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" />

如果我做对了，你想用类文本<p>获得所有测试，那么你可以做这样的事情

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

上面的代码将只给你那些带有类"text"的元素的内容，这些元素直接在类"包装器"下

您可以使用

.filter()过滤掉具有类text且没有同级的元素：

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

小提琴演示

您可以使用 

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

小提琴演示

相关文章：