如何在 ajax 成功时将类添加到具有相同 class 的同级中

Question

我想用 ajax 创建模板。当点击按钮时它应该从sample.html调用模板，模板结构更像var sample，如果它总是显示错误结果请原谅我。

我想在 ajax 成功调用后将 class 添加到 .contentLoad，所以当它成功时 .contentLoad 已经在 DOM addClass('hidden') 除了我从 ajax.

添加的新 .contentLoad

当 ajax 成功时，是否可以将类添加到具有相同 class 的同级中？

$(document).ready(function() {
  $('.klik').on('click', function() {
    $('.contentLoad').addClass('hidden');
    chooseClick();
  });
});


var sample = '<div class="contentLoad" style="display: none;">' +
  '<div class="contImg">' +
  '<img class="imgres" src="https://static.pexels.com/photos/92957/pexels-photo-92957.jpeg" alt="">' +
  '</div>' +
  '</div>';

function chooseClick() {
  $.ajax({
    url: 'sample.html',
    success: function(temp) {
      $('.load').append(temp).waitForImages(function() {
        $('.loader').hide();
        $('.contentLoad').show();
      });
    },
    error: function() {
      $('.load').prepend('<p>cannot found data</p>');
      $('.loader').hide();
    },
    beforeSend: function() {
      $('.loader').show();
    }
  })
}

.load {
  position: relative;
  width: 1320px;
  margin: auto;
}

.imgres {
  max-width: 100%;
  height: auto;
}

.contentLoad {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.hidden {
  opacity: 0;
  z-index: 1;
}

.loader {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="klik">show</button>
<p class="loader">Loading</p>
<h3>load image here</h3>
<div class="load">
  <div class="contentLoad">
    <div class="contImg">
      <img class="imgres" src="https://now.uiowa.edu/sites/now.uiowa.edu/files/styles/640_wide/public/11_ui_school_of_music.jpg?itok=mxvtE2Am" alt="">
    </div>
  </div>

</div>

Answer 1

你可以用这个

var sample = '<div id="newSample" class="contentLoad" style="display: none;">' +
  '<div class="contImg">' +
  '<img class="imgres" src="https://static.pexels.com/photos/92957/pexels-photo-92957.jpeg" alt="">' +
  '</div>' +
  '</div>';

$('.contentLoad:not(#nemSample)').addClass("YourClass")

如何在 ajax 成功时将类添加到具有相同 class 的同级中

How to addClass into sibling with same class when ajax success

ajax

jquery

siblings