как выбрать брата в поле ввода

Question

Хорошо, поэтому я уже некоторое время пытаюсь это сделать. Моя логика кажется правильной в моих глазах, но должно быть что-то, чего мне не хватает. Вот мой код:

HTML:

<div class="login-input-wrap">
    <h3>First Name:</h3>
    <input type="text" name="firstname" />
</div>

JavaScript с некоторыми JQuery

function validateSignUp()
{
    var fname = $('input [name|="firstname"]');
    if (fname.val() == "" || fname.val() == null)
    {
        fname.parent().children('h3').css("color", "red");
        alert ("here it is");
    }
    return false;
}

validate вызывается при отправке формы, вызывается предупреждение, но css не работает. Я также попытался выбрать родственного элемента ввода следующим образом:

function validateSignUp()
{
    var fname = $('input [name|="firstname"]');
    if (fname.val() == "" || fname.val() == null)
    {
        fname.siblings('h3').css("color", "red");
        alert ("here it is");
    }
    return false;
}

но это тоже не сработало.

спасибо за любую помощь.

Answer 1

Удалить пробел после input в этом селекторе.Между вещами, которые относятся к одному и тому же объекту, не должно быть пробелов.Вы неправильно выбрали тег input, поэтому у пустого объекта jQuery не было братьев и сестер, поэтому остальные не работали.Измените это:

$('input [name|="firstname"]')

, чтобы оно выглядело так:

$('input[name|="firstname"]')

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/YyUAx/

---

Вы также можете упроститьэто:

if (fname.val() == "" || fname.val() == null)

, изменив его на это:

if (!fname.val()) {

Answer 2

​$("input").prev("h3").css("color","red")​​​​​​​​​​​​​​​​​​​​​​​​

, чтобы получить предыдущий элемент

edit: с показанной разметкой,

​$("input[name=firstname]").prev("h3").css("color","red")​​​​​​​​​​​​​​​​​​​​​​​​

все еще работает