Есть ли более чистый способ написания этих строк jQuery?

Question

Есть ли более чистый способ написания этих строк?

$("input:text").each(function() { 
    if ($(this).val() !== "") 
     $(this).show().prev().addClass('highlighted').parent().parent().prev().prop('checked', true); 
    }); 

EDIT: Некоторая дополнительная информация фона ...

Это примерно опрос, где ответы сохраняются, при переходе к следующему вопросу. По этому конкретному вопросу посетитель может проверить флажки. Однако последние 2 варианта - это поля ввода. Для обоих этих полей ввода я сделал фальшивые флажки и использовал jQuery, чтобы эти флажки выглядели функционально.

Если вы хотите вернуться к этому вопросу, обычные флажки, которые вы проверили, по-прежнему будут проверяться, но поддельные - нет. Также поля ввода скрыты, даже если они имеют значение.

Мне нужно jQuery выше, чтобы убедиться, что фальшивые флажки отмечены, когда поле ввода имеет значение. Класс «выделенный» предназначен для дополнительного визуального подтверждения того, что вы проверили этот ответ.

Теперь вот html. У меня очень мало контроля над этой разметкой.

<input class="fake-check" type="checkbox"> 
<div class="question-open-question"> 
    <div class="form-item form-type-textfield form-item-situations-other1"> 
     <label for="edit-situations-other1" class="highlighted">Ik wil: </label> 
     <input type="text" id="edit-situations-other1" name="situations[other1]" value="" size="60" maxlength="128" class="form-text" style="display: inline-block;"> 
    </div> 
</div> 

Теперь не поймите меня неправильно. Работает над jQuery. Я просто хотел бы узнать более чистый способ написать это.

Таким образом, когда поле ввода имеет значение, я хочу 3 вещи: - Для того, чтобы показать, что поле ввода - Для того, чтобы добавить класс к метке - Для того, чтобы установить флажок

Answer 1

Для вашей второй версии к работа, вы должны сохранить $(this).prev() и поставить скобки вокруг if, так как вы хотите выполнить несколько операторов

$("input:text").each(function() { 
    if ($(this).val() !== "") { 
     $(this).show(); 
     var prev = $(this).prev(); 
     prev.addClass('highlighted'); 
     prev.parent().parent().prev().prop('checked', true); 
    } 
}); 

Обратите внимание, что при использовании prev() и parent() хрупкий путь, потому что большинство изменений DOM нарушит ваш JavaScript. Вы должны отметить элементы, которые вы пытаетесь достичь с названий класса и использовать closest() и find()

Answer 2

Одно предложение было бы обернуть все в контейнер DIV, а затем работать с этим, а не прыгать вверх и вниз по DOM:

<div class="my-section"> 
    ... 
    <span class="to-highlight">...</span> 
    <input class="my-text"> 
    ... 
    <input type="checkbox" class="my-checkbox"> 
</div> 

Тогда ваши JS:

$(".my-section").each(function() { 
    if ($(".my-text", this).val() !== "") { 
     $(".my-text", this).show(); 
     $(".to-highlight", this).addClass("highlighted"); 
     $(".my-checkbox", this).prop("checked", true); 
    } 
}); 

Таким образом, ваш код очень хорошо содержится в одном элементе. Это гораздо меньше шансов сломаться с изменениями структуры HTML и не будет вмешиваться в элементы, не входящие в его область. Обычно я рекомендую избегать функций, тесно связанных с HTML-структурой, такой как parent() и prev().

Answer 3

$("input:text").each(function() { 
    var $t=$(this); 
    if ($t.val() !== "") { 
    $t.show().prev().addClass('highlighted').end().parent().parent().prev().prop('checked', true); 
    } 
}); 

Используйте .end(), чтобы вернуться к предыдущему селектору (в данном случае $(this) вместо $(this).prev()).