Question

给出以下HTML：

<div class="row">
    <label class="label">Label Text</label>
    <div class="error">Error Message</div>
    <div class="container">
        <input type="text" class="input">
    </div>
    <div class="instructions">
        Instructions text
    </div>
</div>

显然，每个表单字段都会重复此操作，但div.error仅适用于实际包含错误的行（验证服务器端）。

如果row包含div.error，那么我想使用jQuery为.row，.label，.input和{分配其他类{1}}类 - 但仅适用于包含错误的.instructions。

（我意识到jQuery不是处理这个问题的最佳方式，但在这种情况下我只有。）

在过去的两个小时里，我已经把我的大脑绑在了结上，只是无法弄明白，所以对于如何实现这一点感激不尽。

Answer 1

您可以通过以下方式完成：

$('.row').each(function() {
  if ($(this).find('.error').length > 0) {
    $('.label, .input, .instructions',this).add(this).addClass('foo')
  }
})

<强> jsFiddle example

Answer 2

您可以使用选择器查找所有error类，并使用each()遍历每个类。在每次迭代中，您可以通过closest()函数访问最近的<tr>并执行您需要的操作：

// Target your erroneous <div> elements
$('div.error').each(function(){ 
    // Add a specific class 'your-class' to each row that contains an error  
    $(this).closest('.row').addClass('your-class');
});

同样，如果您想定位<tr>元素下的其他字段，您也可以在each()函数中执行此操作：

// Target your erroneous <div> elements
$('div.error').each(function(){ 
    // This is your current row
    var $row = $(this).closest('.row');
    // Find your instructions and do something
    $row.find('.instructions').doSomething();
    // Find your label and do something 
    $row.find('.label').doSomething();
    // Continue to your heart's content
});

示例代码段

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="row">
    <label class="label">Label Text</label>
    <div class="error">Error Message</div>
    <div class="container">
        <input type="text" class="input">
    </div>
    <div class="instructions">
        Instructions text
    </div>
</div>
  <hr />
  <div class="row">
    <label class="label">Label Text</label>
    <div class="error">Error Message</div>
    <div class="container">
        <input type="text" class="input">
    </div>
    <div class="instructions">
        Instructions text
    </div>
</div>
  <hr />
  <div class="row">
    <label class="label">Label Text</label>
    <div></div>
    <div class="container">
        <input type="text" class="input">
    </div>
    <div class="instructions">
        Instructions text
    </div>
    <script>
      $(function(){
        // Target your erroneous <div> elements
        $('div.error').each(function(){ 
            // This is your current row
            var $row = $(this).closest('.row');
            // Find your instructions and do something
            $row.find('.instructions').css('color','red');
            // Find your label and do something 
            $row.find('.label').css('color','blue');
            // Continue to your heart's content
            $row.find('.input').css('color','green').val('Uh oh');
        });
      })
    </script>
</div>
</body>
</html>

Answer 3

$('.row .error').each(function () {
  $(this).siblings('.label, .instructions').addClass('.errorrow');
  $(this).siblings('.container').find('.input').addClass('.errorrow');
});

你可能最好将类设置为.row和样式，或者从那里选择元素：

/* jQuery */
$('.row .errorrow').parent().addClass('.errorrow');

/* CSS */
.row.error {
  color: red;
}

如果找到具有特定类的元素，则将类添加到父元素和兄弟元素

3 个答案: