Question

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

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

我目前正在尝试使用prevAll（），但显然它无法正常工作......

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>

JS：

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

谢谢！

Answer 1

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

在jsFiddle中的HTML中，您可以使用：

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

如果只有一张图片，那就更好了将ID放在所需的图像上，这样你就可以直接定位它。

如果这是一个在同一页面中使用多个位置的模式，那么如果为图像提供一个唯一的类并将图像和表单放在一个共同的类中，则可以创建一个适用于所有这些代码的代码体父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>

P.S。 .show()是设置display: block;

的快捷方式

Answer 2

为什么不使用jQuery change和show函数？

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

Answer 3

检查此http://jsfiddle.net/nicosunshine/8G4Aj/3/

你遇到的问题是你试图在select（在你的情况下是$（this））的上下文中获取图像，所以我将该选择器更改为$（“。wrapper”）以便它抓住顶部元素包含img然后使用find来获取img。

您也可以通过其他方式执行此操作，例如您可以在img中添加ID，然后更改

$(".wrapper").find('img').css("display","block"); //gets the div with the class wrapper and finds the images that it contains and changes the css

到

$("#imgID").css("display","block"); //grabs the element with the id of imgID and changes the css

女巫会更有效率，比如this fiddle

Answer 4

我不禁想知道你是否让它变得比它需要的更复杂。它看起来像一些额外的类可以帮助的情况。

但是，我没能创造那种情景。所以我这样做了：

http://jsfiddle.net/8G4Aj/4/

$("form select").change(function() {
    $(this).closest('.another-wrapper').prev().find('img').css("display","block");
});

将树向上翻到another-wrapper然后再到它之前的兄弟（wrapper），然后再挖回图像的div。

jQuery遍历dom以获取元素

4 个答案: