동일한 클래스로 해당 div에 HTML을 추가하는 방법

Question

동일한 데이터 속성 값을 갖는 해당 div에 어떻게 Html을 추가 할 수 있습니까? 버튼을 클릭하면 모달에 데이터 속성 값이 전달되고 모달의 제출 버튼에도 값이 다시 전달됩니다. 그 data-attribut 값을 가진 요소를 찾고 html을 추가하고 싶습니다. 이미지 (1)

 <button data-media-select="2" data-gallery-position="2" type="button" class="btn btn-success media-modal-btn" >Image (1)</button> 
     <div data-gallery-position="2" class="popup-gallery"></div> 

     <button data-media-select="5" data-gallery-position="3" type="button" class="btn btn-warning media-modal-btn" >Images (5)</button> 
     <div data-gallery-position="3" class="popup-gallery"></div> 

JQuery와 :

$mediaModalBtn.on('click',function(){ 
     var mediaSelect = $(this).data('media-select') 
      , galleryPosition = $(this).data('gallery-position'); 
     $.ajax({ 
      url: 'http://example.com/abc/media', 
      success: function (result) { 
       $("#mediaModalFiles").html(result); 
       $('#mediaModal').modal('show'); 
       $('#selectMediaBtn').attr('data-gallery-position',galleryPosition); 
       $('#mediaModal').checkboxes('max', mediaSelect); 
       $("#selectMediaBtn").attr('disabled','disabled'); 
      } 
     }); 
    }); 
    $('body').delegate('input[name="media[]"]','change',function() { 
     var media = new Array(); 
     $('input[name="media[]"]:checked').each(function() { 
      media.push(this.value); 
     }); 
     if (media.length > 0) 
     { 
      $("#selectMediaBtn").removeAttr('disabled'); 
     } else { 
      $("#selectMediaBtn").attr('disabled','disabled'); 
     } 
    }); 
    $('body').delegate('#selectMediaBtn', 'click', function() { 
     var galleryPosition = $(this).data('gallery-position') 
      , targetGalleryPosition = $('.popup-gallery[data-gallery-position = "'+galleryPosition+'" ]') 
      , media = new Array(); 
     $('input[name="media[]"]:checked').each(function() { 
      media.push(this.value); 
     }); 
     if (media.length > 0) 
     { 
      $.ajax({ 
       url: 'http://example.com/abc/media/fetch', 
       data: { media : media }, 
       success: function (result) { 
        $('#mediaModal').modal('hide'); 
        $(targetGalleryPosition).html(result); 
       } 
      }); 
     } 
    }); 

Answer 1

당신이 .filter() 자신의 갤러리 위치 데이터 속성에 같은 값을 가지고있는 요소를 필터링하는 데 사용할 수 있습니다

$(function(){ 
 
    $(".div_btn").click(function(){ 
 
     $(".galery_item").removeClass("selected"); 
 
     var pos=$(this).data("gallery-position"); 
 
     $(".galery_item").filter(function(){ 
 
      return $(this).data("gallery-position")==pos; 
 
     }).addClass("selected"); 
 
    }); 
 
});

.div_btn{ 
 
    display:inline-block; 
 
    width:100px; 
 
    height:100%; 
 
    text-align:center; 
 
    border:5px ridge gray; 
 
    cursor:pointer; 
 
} 
 
.div_btn:active{ 
 
    background:green; 
 
} 
 
.galery_item{ 
 
    display:inline-block; 
 
    width:50px; 
 
    height:50px; 
 
    text-align:center; 
 
    border:5px ridge gray; 
 
} 
 
.selected{ 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div_btn" data-gallery-position="top">top</div> 
 
<div class="div_btn" data-gallery-position="middle">middle</div> 
 
<div class="div_btn" data-gallery-position="bottom">bottom</div> 
 
<hr/> 
 
<div class="galery_item" data-gallery-position="top"></div> 
 
<div class="galery_item" data-gallery-position="top"></div> 
 
<div class="galery_item" data-gallery-position="top"></div> 
 
<div class="galery_item" data-gallery-position="top"></div> 
 
<div class="galery_item" data-gallery-position="top"></div> 
 
<br/> 
 
<div class="galery_item" data-gallery-position="middle"></div> 
 
<div class="galery_item" data-gallery-position="middle"></div> 
 
<div class="galery_item" data-gallery-position="middle"></div> 
 
<div class="galery_item" data-gallery-position="middle"></div> 
 
<div class="galery_item" data-gallery-position="middle"></div> 
 
<br/> 
 
<div class="galery_item" data-gallery-position="bottom"></div> 
 
<div class="galery_item" data-gallery-position="bottom"></div> 
 
<div class="galery_item" data-gallery-position="bottom"></div> 
 
<div class="galery_item" data-gallery-position="bottom"></div> 
 
<div class="galery_item" data-gallery-position="bottom"></div>