Question

如果输入具有required=required，但似乎无法使它工作，我正在尝试向div添加一个类。

我的表单的一部分：

<form id="myform">
<div id="yourname" class="yournamelabel">
    <label>What is your name?</label>
</div>

<div class="js-form-item">
<input type="text" id="enter-your-name" name="your_name" value="" 
class="form-text required" required="required" aria-required="true">
</div>
</form>

我的脚本：

$('[required="required"]').closest('.yournamelabel').addClass('required');

JSfiddle

Answer 1

您的问题是您使用.closest。最接近的对象在DOM树上移动，并且因为yournamelabel不是输入closest的父级，所以找不到它。

将html更改为以下内容将解决此问题

<form id="myform">
    <div id="yourname" class="yournamelabel">
        <label>What is your name?</label>
        <div class="js-form-item">
            <input type="text" id="enter-your-name" name="your_name" value="" 
             class="form-text required" required="required" aria-required="true">
        </div>
    </div>
</form>

提琴https://jsfiddle.net/yghjfp32/

Answer 2

最接近的方法查看元素本身及其父元素。您要查找的元素不是父级，而是输入父级的同级。因此，这意味着您需要做两个选择才能达到目标。

$('[required="required"]')
  .parent()  // grab the div around the input
    .prev('.yournamelabel')  // looks at the previous sibling
      .addClass('required');  // add your class

div.required {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
  <div id="yourname" class="yournamelabel">
    <label>What is your name?</label>
  </div>

  <div class="js-form-item">
    <input type="text" id="enter-your-name" name="your_name" value="" class="form-text required" required="required" aria-required="true">
  </div>
</form>

Answer 3

如果您不想更改结构，则可以利用标签的for属性。

 <label for="enter-your-name">What is your name?</label>

除了只是必需的，不是必需的=“ required”

这是一个小提琴https://jsfiddle.net/e08drsh5/

$('input').filter('[required]').each(function(){
    var $element = $(this)

    if ($element.val() == '') {
        var $label = $("label[for='"+this.id+"']")
        $label.addClass('required')   
    }
});

如果需要输入，请向div添加类

3 个答案: