如何将jquery子选择器（＆gt;）与变量一起使用？

Question

我有两个选项表，带有单选按钮。第一种包含调味汁（marinara，bbq等）。第二种包含调味汁量（常规，额外等）。调味汁量有三种选择 - 左，全，右。

HTML很混乱并且由CMS生成，我无法更改，所以我无法使用我的工作。

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

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

表格的代码相当庞大;我有一个小提琴here包含比我在这里张贴的更大的块。

这是酱油口味的样子：

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

这是jQuery：

$('.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是正确的，x.show()有效。但是当我尝试获取必要的两个td元素时，所有尝试都返回空对象或false。

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

Answer 1

您可以使用.children()

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

<小时/> 评论jasper

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

Answer 2

或者，$('td.pb-left', x);

它基本上是在td.pb-left

的上下文中找到x

它将匹配x的所有后代，而不仅仅是>选择器之类的直接子项。