jQuery 遍历 dom 获取元素

Question

我很难弄清楚如何正确且最有效地遍历 DOM 以选择我需要的元素。

基本上，当 select 语句更改时，我需要它，它会更改元素的 CSS 以显示 block 。最初显示 NONE。

我目前正在尝试使用 prevAll() 但显然它不起作用......

请参阅https://jsfiddle.net/8G4Aj/现场 sample

HTML:

<div class="wrapper">
    <div class="more-wrapper">
        <img src="http://someimage.png" alt="image" />
    </div>    
</div>

<div class="another-wrapper">
    <div class="some-wrapper">
        <form>
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </form>
    </div>
</div>

JavaScript:

$("form select").change(function() {
    $(this).prevAll('img').css("display","block");
});

Answer 1

您需要一个选择器来获取您要隐藏的图像。 prevAll() 仅查看起始元素之前的同级元素。您没有任何与之匹配的图片。

在 jsFiddle 的 HTML 中，您可以使用以下内容:

$("form select").change(function() {
    $(".more-wrapper img").show();
});

如果只有一张图像，最好在所需图像上放置一个 ID，以便您可以直接定位它。

如果这是一种在同一页面中使用多个位置的模式，那么如果您给图像一个唯一的类并将图像和表单放在一个公共(public)的位置，那么您可以编写一个可在所有位置使用的代码体。具有公共(public)类名的父 div。看起来像这样:

代码:

$("form select").change(function() {
    $(this).closest(".formSet").find(".toggleImage").show();
});

HTML:

<div class="formSet">
    <div class="wrapper">
        <div class="more-wrapper">
            <img class="toggleImage" src="http://someimage.png" alt="image" />
        </div>    
    </div>

    <div class="another-wrapper">
        <div class="some-wrapper">
            <form>
                <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </form>
        </div>
    </div>
</div>

附注.show() 是设置 display: block;

的快捷方式