ajaxの成功時に同じクラスの兄弟にクラスを追加する方法

Question

私はajaxでテンプレートを作成したいと思います。 ボタンklikは、sample.htmlからテンプレートを呼び出す必要があります。テンプレートの構造は、varサンプルのようなものです。

私はajax成功の呼び出しの後に.contentLoadにクラスを追加したいので、成功したときに.contentLoadはすでにDOM addClass（ 'hidden'）内にあります。新しい.contentLoadを除いて、私はajaxから追加します。

ajaxが成功すると、同じクラスの兄弟にクラスを追加することはできますか？

$(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

あなたは2 contentLoadを持っていて、両方を維持したい成功したこの

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")