jquery - 如何选择包含至少一个 [attr=name1] 元素的所有元素，而这些元素又包含至少一个 [attr=name2] 元素？

Question

我有这个标记：

<div class="click">click</div>
<div id="wrapper">
<div class="container">
<div data-attrfirst='type1'><span data-attrsecond='type2'>must be red</span></div>
</div>
</div>

我想选择所有的.containers ：
1. 在里面#wrapper；
2. 包含data-attrfirst='type1'元素，而元素又包含data-attrsecond='type2'元素。
我的要求：
1. 我的 '#wrapper'、'type1'、'type2' 值必须作为变量保存。
2. 我必须在某个标签内找到这一切（在这种情况下，我选择body）。

我试过这个（星号可能会被删除，没有区别）：

<script>
    $(document).ready(function () {
        $('.click').click(function () {
            var myid = '#wrapper';
            var attrfirst = 'type1';
            var attrsecond = 'type2';
            var elem = $('*[data-attrfirst=' + attrfirst + ']').has('*[data-attrsecond=' + attrsecond + ']');
            $('body').find(myid + ' .container').each(function (i) {
                if ($(this).has('*[data-attrfirst=' + attrfirst + '] *[data-attrsecond=' + attrsecond + ']')) {
                    $(this).css('color', 'red')
                }
            });

            $('body').find(myid + ' .container').each(function (i) {
                if ($(this).has(elem)) {
                    $(this).css('color', 'red')
                }
            });
            $('body').find(myid + ' .container').filter(function (i) {
                return $('*[data-attrfirst=' + attrfirst + '] *[data-attrsecond=' + attrsecond + ']', this).length >= 1
            }).css('color', 'red')
        });
    });
</script>

我哪里错了？而且我从 Jquery 文档中不明白，是否.has接受 Jquery 对象？

Answer 1

你的问题说你想找到#container，所以使用这个：

$('body #wrapper .container:has([data-attrfirst="type1"] [data-attrsecond="type2"])');

或者，为了不那么混乱，您可以向后工作：

$('[data-attrfirst="type1"] [data-attrsecond="type2"]')
     .closest('body #wrapper .container');

---

但是，从您的代码看来，您实际上想要找到最后一个data-attrsecond="type2"元素。在这种情况下，使用这个：

$('body #wrapper .container [data-attrfirst="type1"] [data-attrsecond="type2"]');

Answer 2

您正在尝试查找.container，但您已将“容器”定义为 id 属性而不是类属性。#container应该返回您正在寻找的元素。

Answer 3

这将起作用：

attrfirst = 'type1';
attrsecond = 'type2';
thetag = 'body';

$(thetag + " #wrapper [data-attrfirst='" + attrfirst + "'] [data-attrsecond='" + attrsecond + "']").css('color', 'red')