jquery - addClass 不工作

Question

我有这个代码：

<div class="tableperso input-append">
<form id="perso" action="form/perso.php" method="post">
<table class="table2 table-bordered">
  <tr>
    <td>
      <input class="input-medium" type="text" placeholder="CMS" name="cmsperso" id="cmsperso" pattern="[-.,_ a-zA-ZáàâäãéèêëíìîïóòôöõúùûüýÿÁÀÂÄÃÉÈÊËÍÌÎÏÓÒÔÖÕÚÙÛÜÝ]+" />
      <input class="separ2 input-medium" type="text" placeholder="Chef de Quart" name="chefdequart" id="chefdequart" pattern="[-.,_ a-zA-ZáàâäãéèêëíìîïóòôöõúùûüýÿÁÀÂÄÃÉÈÊËÍÌÎÏÓÒÔÖÕÚÙÛÜÝ]+" />
      <input class="separ2 input-medium" type="text" placeholder="Adjoint" name="adjoint" id="adjoint" pattern="[-.,_ a-zA-ZáàâäãéèêëíìîïóòôöõúùûüýÿÁÀÂÄÃÉÈÊËÍÌÎÏÓÒÔÖÕÚÙÛÜÝ]+" />
    </td>
    <td class="button">
      <button id="persobtn" type="submit" name="persobtn" class="btn"><i class="icon-ok"></i></button>
    </td>
  </tr>
</table>
</form>
</div>

<script type="text/javascript">
 $(function () {
$('#perso').submit(function () {
  $.ajax({
    url: this.action,
    type: this.method,
    data: $(this).serialize(),
    success: function(data){
      data = $.parseJSON(data);
        if(data.status == "ok") {
          var now = new Date();
          var hours = now.getHours();
            if (now.getHours() <= 9) {
              var hours = '0'+now.getHours();
            }
            else {
              var hours = now.getHours();
            }
          var minutes = now.getMinutes();
            if (now.getMinutes() <= 9) {
              var minutes = '0'+now.getMinutes();
            }
            else {
              var minutes = now.getMinutes();
            }
          var cmsperso = $("#cmsperso").val();
          var chefdequart = $("#chefdequart").val();
          var adjoint = $("#adjoint").val();
          var emptycmsperso = $("#cmsperso").val().length == 0;
          var emptychefdequart = $("#chefdequart").val().length == 0;
          var emptyadjoint = $("#adjoint").val().length == 0;

          if (emptycmsperso && emptychefdequart && emptyadjoint) {
            $('#persobtn').addClass('btn-danger')
              .delay(1000)
              .queue(function() {
                 $(this).removeClass('btn-danger');
                 $(this).dequeue();
              });
          }
          else if (emptycmsperso && emptychefdequart) {
            $('#persobtn').addClass('btn-success')
                  .delay(1000)
                  .queue(function() {
                     $(this).removeClass('btn-success');
                     $(this).dequeue();
                  });
            var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td>Prise de fonction de <b class="textepersoadj">'+adjoint+'</b> en tant qu\'adjoint.</td><td class="button"><button class="editperso"><i class="icon-pencil"></i></button></td><td class="button"><button class="trashperso"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          }
          else if (emptychefdequart && emptyadjoint) {
            $('#persobtn').addClass('btn-success')
                  .delay(1000)
                  .queue(function() {
                     $(this).removeClass('btn-success');
                     $(this).dequeue();
                  });
            var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td>Prise de fonction de <b class="textepersocms">'+cmsperso+'</b> en tant que CMS.</td><td class="button"><button class="editperso"><i class="icon-pencil"></i></button></td><td class="button"><button class="trashperso"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          }
          else if (emptycmsperso && emptyadjoint) {
            $('#persobtn').addClass('btn-success')
                  .delay(1000)
                  .queue(function() {
                     $(this).removeClass('btn-success');
                     $(this).dequeue();
                  });
            var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td>Prise de fonction de <b class="textepersocdq">'+chefdequart+'</b> en tant que Chef de Quart.</td><td class="button"><button class="editperso"><i class="icon-pencil"></i></button></td><td class="button"><button class="trashperso"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          }
          else if (emptycmsperso) {
            $('#persobtn').addClass('btn-success')
                  .delay(1000)
                  .queue(function() {
                     $(this).removeClass('btn-success');
                     $(this).dequeue();
                  });
            var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td>Modification de l\'équipe de Quart : <b class="textepersocdq">'+chefdequart+'</b> prend la fonction de Chef de Quart et <b class="textepersoadj">'+adjoint+'</b> prend celle d\'adjoint.</td><td class="button"><button class="editperso"><i class="icon-pencil"></i></button></td><td class="button"><button class="trashperso"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          }
          else if (emptychefdequart) {
            $('#persobtn').addClass('btn-success')
                  .delay(1000)
                  .queue(function() {
                     $(this).removeClass('btn-success');
                     $(this).dequeue();
                  });
            var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td>Modification de l\'équipe de Quart : <b class="textepersocms">'+cmsperso+'</b> prend la fonction de CMS et <b class="textepersoadj">'+adjoint+'</b> prend celle d\'adjoint.</td><td class="button"><button class="editperso"><i class="icon-pencil"></i></button></td><td class="button"><button class="trashperso"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          }
          else if (emptyadjoint) {
            $('#persobtn').addClass('btn-success')
                  .delay(1000)
                  .queue(function() {
                     $(this).removeClass('btn-success');
                     $(this).dequeue();
                  });
            var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td>Modification de l\'équipe de Quart : <b class="textepersocms">'+cmsperso+'</b> prend la fonction de CMS et <b class="textepersocdq">'+chefdequart+'</b> prend celle de Chef de Quart.</td><td class="button"><button class="editperso"><i class="icon-pencil"></i></button></td><td class="button"><button class="trashperso"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          }
          else {
            $('#persobtn').addClass('btn-success')
                  .delay(1000)
                  .queue(function() {
                     $(this).removeClass('btn-success');
                     $(this).dequeue();
                  });
            var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td>Modification de l\'équipe de Quart : <b class="textepersocms">'+cmsperso+'</b> prend la fonction de CMS, <b class="textepersocdq">'+chefdequart+'</b> prend celle de Chef de Quart et <b class="textepersoadj">'+adjoint+'</b> prend celle d\'adjoint.</td><td class="button"><button class="editperso"><i class="icon-pencil"></i></button></td><td class="button"><button class="trashperso"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          }
          $('#tablemc').append(nouvelle_ligne);
        }
        else {
          alert(data.error);
        }
    }
  });
return false;
});
$(document).on("click", ".trashperso", function(e){
  e.preventDefault();
    var $ligneParent = $(this).parent().parent();
    trashperso($ligneParent);
});

function trashperso(aLigneToTrash) {
if (confirm("Vous allez supprimer définitivement cette ligne !")) {
  var cmsperso = aLigneToTrash.children().children('.textepersocms').html();
  var chefdequart = aLigneToTrash.children().children('.textepersocdq').html();
  var adjoint = aLigneToTrash.children().children('.textepersoadj').html();

  $.ajax({
    type: "POST",
    url: "form/delete/deleteperso.php",
    data: { cmsperso: cmsperso, chefdequart: chefdequart, adjoint: adjoint },
    cache: false,
    success: function() {
      aLigneToTrash.fadeOut('slow', function() {
        aLigneToTrash.remove();
      });
    }
  });
  return false;      
 }
}

$(document).on("click", ".editperso", function(f){
  f.stopPropagation();
    var $CellParent = $(this).closest('td').prev().prev();
    editperso1($CellParent);
});

function editperso1(aCellToEdit) {
  aCellToEdit.editable({
    mode: 'inline',
    inputclass: 'input-mini'
  });
}

$(document).on("click", ".editperso", function(g){
  g.stopPropagation();
    var $CellParent = $(this).closest('td').prev().children('b');
    editperso2($CellParent);
});

function editperso2(bCellToEdit) {
  bCellToEdit.editable({
    mode: 'inline',
    inputclass: 'input-medium texteperso',
    type: 'text',
    success: function() {
      var cmsperso = $('.textepersocms').next('span').children('div').children('form').children('div').children('div').children('div').children('input.texteperso').val();
    var chefdequart = $('.textepersocdq').next('span').children('div').children('form').children('div').children('div').children('div').children('input.texteperso').val();
    var adjoint = $('.textepersoadj').next('span').children('div').children('form').children('div').children('div').children('div').children('input.texteperso').val();

    if(cmsperso === undefined) { var cmsperso = $(this).closest('td').children('.textepersocms').html(); }
    if(chefdequart === undefined) { var chefdequart = $(this).closest('td').children('.textepersocdq').html(); }
    if(adjoint === undefined) { var adjoint = $(this).closest('td').children('.textepersoadj').html(); }

    var cmsperso2 = $(this).closest('td').children('.textepersocms').html();
    var chefdequart2 = $(this).closest('td').children('.textepersocdq').html();
    var adjoint2 = $(this).closest('td').children('.textepersoadj').html();

    var pattern = /^[\-.,_ a-zA-ZáàâäãéèêëíìîïóòôöõúùûüýÿÁÀÂÄÃÉÈÊËÍÌÎÏÓÒÔÖÕÚÙÛÜÝ]+$/;
    var patterncms = pattern.test(cmsperso);
    var patterncdq = pattern.test(chefdequart);
    var patternadj = pattern.test(adjoint);

    if (patterncms == true && patterncdq == true && patternadj == true) {
      $.ajax({
        type: "POST",
        url: "form/update/updateperso.php",
        data: { cmsperso: cmsperso, cmsperso2: cmsperso2, chefdequart: chefdequart, chefdequart2: chefdequart2, adjoint: adjoint, adjoint2: adjoint2 }
      });
    }
    else {
      $('input.texteperso').parents('div.control-group').each(function() {
        $(this).addClass('error');
        console.log($(this));
      });
      return false;
    }
  }
  });
}
});

addClass 不起作用，我使用 jquery 1.9.1 和 Bootstrap 2.3.0。在此代码之前，我在 div 中使用“控制组”类创建了一个动态输入。如果没有错误，一切正常，但如果有问题，我想添加类“错误”，但 console.log 返回“ jQuery(div.control-group)”，没有错误类。

和“这个”返回到<div class="control-group">

当我尝试时addClass，没有任何改变。

当我尝试时attr('class', 'error')，我有错误。

当我尝试时attr('class', 'control-group error')，我只有对照组

当我尝试时attr('class', 'control-group'+ 'error')，我有控制组错误（没有空格）

谢谢你帮助我

Answer 1

使用 jquery migrate 而不是 jquery 1.9 最新版本存在正弦错误。而是我会说最新版本不稳定

jquery.com/download/

Answer 2

你应该试试.parentsjQuery 函数。

如何.parents工作。

例子

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(function()
    {
        console.log($("#getMe").parents('div#main'));
        console.log($("#getMe").parents('div#second'));
    });

</script>


<div id="main">
    <div id="second">
        <div id="first">
            <div>1</div>
            <div>2</div>
            <div id="getMe">3</div>
        </div>
    </div>
</div>

.parents获取使用 jQuery 选择器选择的特定dom的所有父级。dom

现在将选择器传递给.parentsthen 它将返回 pass dom。

在你的情况下，它必须是$("input.texteperso").parents('div.control-group')

也patterncms===true && patterncdq===true && patternadj===true改成patterncms == true && patterncdq == true && patternadj == true