Jquery изменение фона родительского div

Question

У меня есть следующий фрагмент на одной из моих HTML-страниц:

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

    </div>
</div>

Моя проблема в том, что мне нужно, чтобы фон inputboximage менялся, когда я щелкаю в текстовом поле address1, и возвращался к оригиналу, когда он терял фокус.

Я использовал следующее:

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

но вместо замены изображения, кажется, добавляется фоновое изображение в div value2, как и следовало ожидать. В этом случае я могу использовать parentNode.parentNode, но есть также шанс, что узел inputboxImage может находиться дальше или ниже родительского дерева.

Есть ли способ, которым я могу изменить этот код, чтобы он перемещался вниз по родительскому дереву, пока не нашел div с именем inputboximage и не заменил там изображение?

Кроме того, если у меня есть два разных класса div, inputboximage и inputboximageLarge, есть ли способ изменить эту функцию, чтобы она работала с обоими, заменяя фоновое изображение другим изображением для каждого?

Answer 1

Я думаю, используя

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

вместо $(this.parentNode) должно работать.

См. Документацию по обходу jQuery

Редактировать: обновлено после ответа Проди (смена родителей на родителей)

Answer 2

Я не уверен на 100%, но думаю, что вам нужен ответ Фила Сакре, кроме использования parents (обратите внимание на последние s)

Из API jQuery:

parent (String expr) возвращает jQuery Получите набор элементов, содержащий уникальных родителей соответствующего набора элементов.

parent (String expr) возвращает jQuery Получить набор элементов, содержащих уникальных предков соответствующего набора элементов (кроме корневого элемента).

Answer 3

.parent (). Css (изменения здесь)

Answer 4

Теперь, поскольку в HTML уникальны только идентификаторы, вы можете ссылаться на 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)');
    });