Адресация только текстовых полей ввода с помощью jQuery

Question

Привет Я пытаюсь обращаться только к текстовым полям, чтобы я мог скрывать метки только для них. Я все еще хочу, чтобы метки для флажков и кнопок readio были видимыми. Код для скрытия работ, но он скрывает все ярлыки.

Сценарий должен работать для всех случаев, независимо от того, какие поля могут быть или как они названы. Так как я получил бы это обратиться только метки для полей ввода текста:

$("label").each(function() { 

Я не могу работать его.

Это образец HTML:

<p class="form-field pd-text"> 
<label class="field-label" for="229122">E-post</label> 
<input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" /> 
</p> 
<p class="form-field pd-checkbox"> 
<label class="field-label" for="229122">Example checkbox</label> 
<span class="value"><span> 
    <input type="checkbox" name="229122" id="229122" value="25034" onchange="" /> 
    <label class="inline" for="229122">false</label> 
</span></span> 
</p> 

Answer 1

Вы можете использовать .map найти метку соответствия на основе его for= атрибута:

var labels = $("input[type='text']").map(function() { 
    return $("label[for=" + this.id + "]").toArray() 
}) 
labels.hide(); 

Пример скрипку: https://jsfiddle.net/rdtt8toe/

Примечание это требует, чтобы id= уникален, он должен быть (и находится в скрипке), но не в вашем коде. Таким образом, с вашим html все ярлыки будут найдены, так как флажок имеет тот же идентификатор, что и текстовое поле.

В качестве альтернативы вы можете сделать предположения о иерархии DOM. Например:

$("input[type='text']").parent().find("label") 

, чтобы найти все этикетки в одном контейнере. Это найдет как спереди, так и сзади и может иметь другие элементы между ними (в отличие от .prev!)

В вашем случае, вы, возможно, предпочитают идти в ближайший .form-field:

$("input[type='text']").closest(`.form-field`).find("label") 

Answer 2

попробовать этот$('[type=text]').prev().hide();

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

var labelFor = $('[type=text]').attr('id'); 
$("label[for="+labelFor+"]").hide() 

Answer 3

Попробуйте это.

$("input[type='text']").prev('label').hide();

<p class="form-field pd-text"> 
 
<label class="field-label" for="229122">E-post</label> 
 
<input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" /> 
 
</p> 
 
<p class="form-field pd-checkbox"> 
 
<label class="field-label" for="229122">Example checkbox</label> 
 
<span class="value"><span> 
 
    <input type="checkbox" name="229122" id="229122" value="25034" onchange="" /> 
 
    <label class="inline" for="229122">false</label> 
 
</span></span> 
 
</p><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Answer 4

Вы могли бы дать пользовательский класс к метке для ввода текста

<p class="form-field pd-text"> 
    <label class="field-label text-label" for="229122">E-post</label> 
    <input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" /> 
</p> 
<p class="form-field pd-checkbox"> 
    <label class="field-label" for="229122">Example checkbox</label> 
    <span class="value"><span> 
     <input type="checkbox" name="229122" id="229122" value="25034" onchange="" /> 
     <label class="inline" for="229122">false</label> 
    </span></span> 
</p> 

затем скрыть только те метки

$(".text-label").hide() 

Если вы хотите скрыть все fo гт-поле назначить пользовательский класс для этой области

т.е.

<p class="form-field pd-text text-label"> 
    <label class="field-label" for="229122">E-post</label> 
    <input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" /> 
</p>