如果需要输入，则将类添加到DIV

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树，因为您的Nemelabel不是输入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

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

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

另外必需的不需要的是不需要的="必需"

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

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