如何将jquery子选择器（>；）与变量一起使用？

我有两个带有单选按钮的选项表。第一种包含酱汁口味（腌麻酱、烧烤等），第二种包含酱汁量（常规、额外等）。酱汁量有三种选择-左、全、右

HTML是混乱的，是由CMS生成的，我无法更改它，所以我只能继续使用现有的内容

当用户选择Marinara以外的酱汁时，除了常规全脂酱汁之外的酱汁量选项应该隐藏

我编写了一些（丑陋的）jquery，隐藏了sauce amount选项，然后重新显示常规sauce选项，但它显示了整行，包括左、右单选按钮。我需要隐藏左侧和右侧单选按钮，但保持中间（整个）按钮显示

表的代码相当庞大；我有一把小提琴，它包含了比我在这里发布的更大的一块

这是酱汁口味行的外观：

<tr class="pb-radio">
        <td class="pb-radio-label pb-highlight"><label>Marinara Sauce</label></td>
        <td class="pb-left">
            <div class="">
                <input type="radio" name="sauce_flavor.left" class="pb-radio-sauce pb-marinara-sauce">
            </div>
        </td>
        <td class="pb-whole">
            <div class="pb-highlight">
                <input type="radio" checked="" name="sauce_flavor.whole" class="pb-radio-sauce pb-marinara-sauce">
            </div>
        </td>
        <td class="pb-right">
            <div class="">
                <input type="radio" name="sauce_flavor.right" class="pb-radio-sauce pb-marinara-sauce">
            </div>
        </td>
    </tr>
    <tr class="pb-radio">
        <td class="pb-radio-label "><label>Garlic Parm Sauce*</label></td>
        <td class="pb-left">
            <div class=""> </div>
        </td>
        <td class="pb-whole">
            <div class="">
                <input type="radio" name="sauce_flavor.whole" class="pb-radio-sauce pb-sauce-no-size-allowed">
            </div>
        </td>
        <td class="pb-right">
            <div class=""></div>
        </td>
    </tr>

在第一个函数中，

x

是正确的，

x.show（）

起作用。但是，当我尝试获取两个必要的

td

元素时，所有尝试都返回空对象或false

如何获取变量的子元素？或者有更好的方法吗？

您可以使用

---

评论

你可以用

---

评论

或者，

$（'td.pb left'，x）

它基本上是在
x

它将匹配x的所有子代，而不仅仅是直接子代，如
选择器。
或者，
$（'td.pb left'，x）；

它基本上是在
x

它将匹配x的所有子代，而不仅仅是直接子代，如
选择器。
这与子代
选择器不同，而是
$（'>td.pb左'，x）可以工作。在我看来，这不是一个好办法。这不仅仅是直接的孩子，但对于这个应用程序，他们的行为应该是一样的。除非有嵌套元素。这一点很好，但使用
x.find（）
而不是将jQuery变量作为jQuery函数的第二个参数会更好。这与子
选择器不同，但
$（'>td.pb left'，x）可以工作。在我看来，这不是一个好办法。这不仅仅是直接的孩子，但对于这个应用程序，他们的行为应该是一样的。除非有嵌套元素。这一点很好，但使用
x.find（）
还是比将jQuery变量作为jQuery函数的第二个参数更好。@Jasper将您的注释添加到答案：）这里没有理由使用find（），贾斯珀的评论只是为了说明如何使用“>”来实现，但仅仅是因为OP要求这样做it@A.Wolff这是思考同样问题的另一种方式。这通常是好事而不是阻碍。特别是，它可以向没有经验的jQuery用户展示
.children（）
正在做什么。@Jasper关于性能和可读性，这是一个障碍；）顺便说一句，我刚刚学到了一个新方法word@Jasper添加您的评论以回答：）这里没有理由使用find（），Jasper的评论只是为了说明如何使用“>”来完成，而只是因为OP要求it@A.Wolff这是思考同样问题的另一种方式。这通常是好事而不是阻碍。特别是，它可以向没有经验的jQuery用户展示
.children（）
正在做什么。@Jasper关于性能和可读性，这是一个障碍；）顺便说一句，刚学了一个新单词
$('.pb-sauce-no-size-allowed').live('change', function() {
    // need to hide all radio buttons plus parent labels, except for Regular Sauce
    $('.pb-radio-sauce-size').closest('tr').hide();
    var x =  $('td.pb-radio-label>label:contains("Regular Sauce")').closest('tr');
    x.show();
    console.log($(x > 'td.pb-left'));
    console.log($('x > td.pb-left'));
    console.log($(x) > 'td.pb-left');
});

$('.pb-marinara-sauce').live('change', function() {
    $('.pb-radio-sauce-size').closest('tr').show();
});

x.children('td.pb-left');

x.find(" > td.pb-left")