이미지만 추출하는 jquery문의
본문
안녕하세요?
도저히 방법을 못찾아서 고수님들의 의견을 듣고 싶습니다.
자바스크립트를 이용해서 아래의 태그 안에서 이미지의 src 값만 추출하고 싶습니다.
이런 경우 어떻게 하는게 좋을까요?
<div class="edibot-product-detail" style="width:1000px;max-width:100%;margin:0 auto;"><div data-api="1.0.0" data-classid="etc_0" data-created="2022-06-22 18:28:38" data-groupid="g000001" data-projectid="N220622_1826" data-sessionid="1" data-shoplang="ko_KR" data-shopno="1" data-version="2.0.0" type="application/json" class="-edibot-metadata"><!--{"api":"1.0.0","classid":"etc_0","groupid":"g000001","mallid":"highseller","projectid":"N220622_1826","sessionid":1,"version":"2.0.0","shopno":1,"shoplang":"ko_KR","created":"2022-06-22 18:28:38"}--></div>
<style>.edibot-product-detail *{ font-family:inherit; font-size:inherit; }.edibot-product-detail img[src=""], .edibot-product-detail img:not([src]) {visibility: hidden !important; height: 1px !important;}.edibot-product-detail div#edb-img-tag,.edibot-product-detail div#edb-img-tag *{position:unset;border:0;border-radius:0;box-sizing:content-box;height:auto;line-height:normal;min-height:auto;text-align:left;transform:none;margin:0;opacity:1;padding:0;transition:opacity .15s linear,background .15s linear,border .15s linear}.edibot-product-detail div#edb-img-tag .edb-tag{position:absolute;display:block;background:rgba(0,0,0,.3);border-radius:50%;border:1px solid transparent;box-shadow:0 4px 6px rgba(0,0,0,.2);box-sizing:border-box;cursor:pointer;height:32px;text-decoration:none;transform:translate(-50%,-50%);width:32px}.edibot-product-detail .edb-img-tag-w.hover div#edb-img-tag .edb-tag{opacity:0;visibility:hidden}.edibot-product-detail div#edb-img-tag .edb-tag:before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px}.edibot-product-detail div#edb-img-tag .edb-tag:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;display:block;background-color:#fff;border-radius:50%;box-shadow:0 4px 6px rgba(0,0,0,.2);height:10px;margin:auto;transition:transform .15s linear;width:10px}.edibot-product-detail div#edb-img-tag .edb-tag .edb-tag-name{position:absolute;display:block;align-items:center;background:#fff;box-shadow:0 6px 10px rgba(0,0,0,.2);color:#000;font-family:-apple-system,Apple SD Gothic Neo,malgun gothic,arial,sans-serif;font-size:12px;font-style:normal;line-height:36px;margin:50% 0 0 50%;max-width:201px;opacity:0;overflow:hidden;padding:0 28px 0 11px;text-decoration:none;text-overflow:ellipsis;transform:translate(-50%,-100%) translateY(-26px);visibility:hidden;white-space:nowrap}.edibot-product-detail div#edb-img-tag .edb-tag .edb-tag-name:after{content:'';position:absolute;top:0;bottom:1px;right:10px;margin:auto 0;background:url(//img.cafe24.com/csdstatic/edibot/v2/img/ui/ec/bg_tag.png) no-repeat;background-size:5px 9px;height:9px;margin-left:10px;width:5px}.edibot-product-detail div#edb-img-tag .edb-tag.top:before{margin-top:-10px}.edibot-product-detail div#edb-img-tag .edb-tag.right:before{margin-right:-10px}.edibot-product-detail div#edb-img-tag .edb-tag.right .edb-tag-name{transform:translate(26px,-50%)}.edibot-product-detail div#edb-img-tag .edb-tag.bottom:before{margin-bottom:-10px}.edibot-product-detail div#edb-img-tag .edb-tag.bottom .edb-tag-name{transform:translate(-50%,26px)}.edibot-product-detail div#edb-img-tag .edb-tag.left:before{margin-left:-10px}.edibot-product-detail div#edb-img-tag .edb-tag.left .edb-tag-name{transform:translate(-100%,-50%) translateX(-26px)}.edibot-product-detail .edb-img-tag-w.hover:hover div#edb-img-tag .edb-tag,.edibot-product-detail div#edb-img-tag .edb-tag:hover .edb-tag-name{opacity:1;visibility:visible}.edibot-product-detail div#edb-img-tag .edb-tag:hover{border:1px solid #eee;background-color:#009cff;box-shadow:none}.edibot-product-detail div#edb-img-tag .edb-tag:hover:after{transform:scale(.6)}.edibot-product-detail div#edb-img-tag .edb-tag .edb-tag-name:hover{text-decoration:underline}html:lang(ja) .edibot-product-detail div#edb-img-tag .edb-tag .edb-tag-name{font-family:-apple-system,verdana,Meiryo,"メイリオ",sans-serif}html:lang(en) .edibot-product-detail div#edb-img-tag .edb-tag .edb-tag-name,html:lang(vi) .edibot-product-detail div#edb-img-tag .edb-tag .edb-tag-name{font-family:-apple-system,Helvetica Neue,Helvetica,Arial,Sans-serif}@media only screen and (hover:none) and (pointer:coarse){.edibot-product-detail .edb-img-tag-w.hover div#edb-img-tag .edb-tag{opacity:1;visibility:visible}}</style>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 화이트 색상 이미지-S1L1" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/af6be9890947e922c3a00324d691873c.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품 이미지-S1L2" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/0c92e429dd2a8ffddf265b74e8f7f4e6.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 차콜 색상 이미지-S1L3" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/640845d2de2aade21387eabfd0dd2069.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/a368197c4ae824ca9b86c0435dc6f1e3.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 모델 착용 이미지-S1L4" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/8c8c326e68265939a3c9c2e1e8fc472e.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L5" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/81f902f0aff679e3bf26241759af720c.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/20efd6fade109e0e1da6e3b41c3302fa.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품 이미지-S1L6" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/cee559724d788c530a85caea62e7a662.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 화이트 색상 이미지-S1L7" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/6b08b0ef5500fe90512bbc3b3748d902.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/bbd26d82b808f23ae8c25925f261c343.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품 이미지-S1L9" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/b4aaa7b1577c24415c597ace71498cea.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품 이미지-S1L10" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/b7d77a9fbd133296f7e3532cd6a3adec.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L11" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/1898cc89e475cd6669e9c7c9fc8741ec.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/fe1f67e49ec323fe463739c4dc5b9163.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L12" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/28bbf85aee3fcf270715128d37ceb251.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/680821820d4acaa500266b051854fe1b.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 크림 색상 이미지-S1L13" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/12c39a510904ad5d1ac8794f094465ba.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L14" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/86db8355c93906ee6808170029ab7087.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L15" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/2bcafaff58b93173a48ba36a0ddcb788.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L16" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/2a56398d490852184dc865972aafdfaf.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L17" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/f0fa0a960fb1f27a81eb25f64a93f113.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 화이트 색상 이미지-S1L18" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/bc74972aab5cc3d1d2d5cf7ae8e3203b.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L19" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/07bac49ac8bdb1e624022ed21be97b21.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/724e80eed0566cea226967be626ed745.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 화이트 색상 이미지-S1L20" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/bed4884727176c6f223d9c4271f767ef.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/eef4eee0ca2e31536c3f914562a70aac.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 크림 색상 이미지-S1L21" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/0cd1915fda0f67cdbb8b9de44664b915.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/b3768d2cae6decfd8c3e0fa6c8791942.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L22" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/fb9cc5d4119f171554548f40f97d6bf9.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/3f9d5b8faf03c9f2f2dc6fc098f9fb4d.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품상세 이미지-S1L23" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/7e7d2a0aab97d847952ab3a33adc863d.jpg"><div style="position: absolute;width:100%;height:100%;left:0%;top:0%;"><div style="position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;"><div style="position:absolute;width:86%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%) rotateZ(0deg);"><img style="display:block; width:100% !important; max-width:initial !important;" src="/web/upload/NNEditor/20220622/8527fcb472edbc16324f92c1615ac551.gif"></div></div></div></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 화이트 색상 이미지-S1L24" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/af33d3111364f98621ac3b587b91d876.jpg"></div><div style="display: block;content: ' ';height:0px!important;"></div>
<div style="position:relative;" class="edb-img-tag-w"><img alt="악세사리 상품 이미지-S1L25" style="margin:0 auto; display: block; max-width:100%;" src="/web/upload/NNEditor/20220622/b60b49a9703c0d7ef4d16dcc2c60b595.jpg"></div><div style="display: block;content: ' ';height:100px!important;"></div>
</div>
답변 1
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
$('.edibot-product-detail img').each(function (idx) {
console.log(idx + ' : ' + $(this).attr('src'));
});
});
</script>
본문 포함 소스