Question

更新：我会添加ID，但是我需要几个小时才能更改我正在使用的系统，有没有其他方法可以执行此操作，例如某些索引排序，还是this的力量？

所以我有以下格式的多个容器（大约5ish inner_groups 都采用相同的格式）：

<div class="inner_group">
    <div class="section">
        <select onchange="get_font_weights_list(this);">
            <option>Font 1</option>
            <option>Font 2</option>
            <option>Font 3</option>
        </select>
    </div>
    <div class="section">
        <select>
            <option>Font Weight 1</option>
            <option>Font Weight 2</option>
            <option>Font Weight 3</option>
        </select>
    </div>
</div>

<div class="inner_group">
    <div class="section">
        <select onchange="get_font_weights_list(this);">
            <option>Font 1</option>
            <option>Font 2</option>
            <option>Font 3</option>
        </select>
    </div>
    <div class="section">
        <select>
            <option>Font Weight 1</option>
            <option>Font Weight 2</option>
            <option>Font Weight 3</option>
        </select>
    </div>
</div>

从select中选择一个字体后，我填充了字体权重，它们有3个权重开始但我添加更多依赖于字体。问题是它适用于第一个容器，但是我说从第二个容器inner_group中选择一个字体，它填充第一个容器的字体权重。

我试图在 get_font_weights_list 中做类似的事情，但它不起作用：

jQuery(font).parent().parent().parent().parent().(".section select:nth-child(4)").append(result);

结果只是一堆字体粗细选项。

我正在将this传递给函数，所以也许我可以从中引入一个引用或索引？我真的无法弄清楚这一点。正如我所说，点击第一个选项而不是任何其他选项时，它的工作非常完美。

Answer 1

根据您拥有的选项数量而不是动态修改值，您可以使用所有可能的值预先填充HTML，并仅显示“当前”值。

<div class="section">
  <select></select>
  <select class="hide"></select>
  <select class="hide"></select>
  <select class="hide"></select>
  <select class="hide"></select>
</div>

然后你可以做类似的事情：

index = this.selectedIndex;
$('.section').find('> select').addClass('hide').eq(index).removeClass('hide')

Answer 2

找到一个解决方案，似乎使用'.find'工作，所以我提出了这个：

jQuery(font).parent().parent().find('> .section:nth-child(5)').addClass('active');

我敢肯定它可能更清洁而不是使用.parent.parent.parent（一旦我找到一个更清洁的解决方案就会更新，或者如果有人知道我尝试过一个直到但是它似乎没有用，但不确定为什么...）

div容器中的jQuery选择问题

2 个答案: