Jquery改变父div的背景答案

【问题标题】：Jquery changing background of parent divJquery改变父div的背景
【发布时间】：2010-09-20 11:23:45
【问题描述】：

我的一个 html 页面中有以下 sn-p：

<div class="inputboximage">
    <div class="value2">
    <input name='address1'  value='Somewhere' type="text" size="26" maxlength="40" />
    <br />

    </div>
</div>

我的问题是我需要在单击 address1 文本字段时更改 inputboximage background 并在失去焦点时恢复为原始状态。

我用过以下：

  <script>
  $(document).ready(function(){

    $("input").focus(function () {
         $(this.parentNode).css('background-image', 'url(images/curvedinputblue.gif)');
    });

    $("input").blur(function () {
    $(this.parentNode).css('background-image', 'url(images/curvedinput.gif)');
    });

  });
  </script>

但它似乎不是替换图像，而是像您期望的那样将背景图像添加到 value2 div。在这种情况下我可以使用parentNode.parentNode，但也有可能inputboxImage 节点可能位于父树的上方或下方。

有没有办法我可以更改此代码，使其向下导航父树，直到找到名为 inputboximage 的 div 并替换那里的图像？

另外，如果我有两个不同的 div 类，inputboximage 和 inputboximageLarge，有没有办法修改这个函数，以便它可以同时工作，用不同的图像替换背景图像？

【问题讨论】：

标签： jquery html

【解决方案1】：

我认为使用

$(this).parents('div.inputBoxImage').css(...)

而不是$(this.parentNode) 应该可以工作。

查看 jQuery traversing documentation

编辑：根据 Prody 的回答更新（将父级更改为父级）

【讨论】：

谢谢菲尔，这很好用。我现在需要做的就是弄清楚如何使它适用于需要相同功能但背景图像不同的其他元素。

【解决方案2】：

我不是 100% 确定，但我认为您需要的是 Phill Sacre 的回答所建议的，除了使用 parents（注意最后一个 s）

来自 jQuery API：

parent(String expr) 返回 jQuery 获取一组元素，其中包含匹配元素集的唯一父代。

parents( String expr ) 返回 jQuery 获取一组元素，其中包含匹配元素集的唯一祖先（根元素除外）。

【讨论】：

你说得对。 parent(...) 仅搜索直接父级。我总是设法把这两个弄糊涂！

【解决方案3】：

现在由于在 HTML 中只有 ID 是唯一的，您可以直接引用 div 而无需进行任何遍历：

<div class="inputboximage" id="inputboximage">
    <div class="value2">
    <input name='address1'      value='5 The Laurels' type="text" size="26" maxlength="40" />
    <br />

    </div>
</div>

<script>
  $(document).ready(function(){

    $("input").focus(function () {
         $('#inputboximage').css('background-image', 'url(images/curvedinputblue.gif)');
    });


  });
</script>

请注意，虽然可以为 CSS 分类过滤父元素，但使用样式类或行为是一个坏主意，您应该避免这样做。但是如果你真的很绝望，你可以试一试：

$("input").focus(function () {
         $(this).parents('div.inputboximage').css('background-image', 'url(images/curvedinputblue.gif)');
    });

【讨论】：

【解决方案4】：

.parent().css（此处更改）

【讨论】：