Question

我需要从我的页面中选择一个div（带有一类数据），其中一个子节点具有特定值（Test1），另一个子节点具有另一个值（User1）;

例如，我想在此示例中选择div.data（注意div.user中的User1）

<div class="data">
    <div>
      <div class="details">
        Test1
      </div>
      <div class="user">User1</div>
    </div>
</div>

但不是这个（注意div.user中的User2）：

<div class="data">
    <div>
      <div class="details">Test1</div>
      <div class="user">User2</div>
    </div>
</div>

我尝试使用:has编写查询，但它既可以选择两个div，也可以不选择。

$("div.data:has(div.details:contains('Test1'), div.user.contains('User1'))")

在这种情况下，如何编写查询以获取div.data？

澄清：我原本不清楚，但我需要选择div.data当用户div包含“User1”和时，详细信息div包含值“Test1”。即两个条件必须为真，才能选择div.data。

Answer 1

我不认为包含最适合用例，仍然尝试

$('div.data:has(div.details:contains("Test1")):not(:has(.user:contains("User2")))').css('color', 'red')

演示：Fiddle

$('div.data').filter(function () {
    var $this = $(this);
    return $.trim($this.find('.details').text()) == 'Test1' && $.trim($this.find('.user').text()) != 'User2'
}).css('color', 'red')

演示：Fiddle

Answer 2

试试这个：

$(".data").find("div.user:contains('User1')").parents("div.data")

演示：http://jsfiddle.net/abhitalks/LvJ7Z/1/

您的要求是仅选择包含文字“div user后代div的{{1}} >用户1 ”。请记住，data区分大小写。

Answer 3

您应该尝试考虑为数据添加类，这样您就可以实际选择所需的数据。

如果你仍然想要这样做，最好这样做：

$('.data').each(function(){

    var thisData = $(this);

    // Uncomment if you want to find by specific siblings

    if($('.user:contains(\'User1\')', thisData).length)
    //if($('.details .details', thisData).length)
    {
        // Do whatever as you like
        thisData.css('background', 'green');
    }
});

DEMO

JQuery Select基于多个子值

3 个答案: