使用javascript獲取div之間的屬性值

Question

我需要在以下代碼中的data-type =“ image-link”之后獲取href和src值

<div id="newsletter-builder-area-center-frame-content">
    <div class="sim-row"  data-id="1" hola="1">
        <div class="sim-row-header1">
            <div class="sim-row-header1-nav">
                <div class="sim-row-edit"  data-type="image-link">
                    <a href="#"><img src="https://dummyimage.com/550x150/83cfcc/fff"/></a>
                </div>
            </div>
            <div class="sim-row-header1-slider">
                <div class="sim-row-header1-slider-left">
                    <div class="sim-row-header1-slider-left-title sim-row-edit" data-type="title">Template Builder</div>
                    <div class="sim-row-header1-slider-left-text sim-row-edit" data-type="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ullamcorper orci. Nullam nulla felis, imperdiet ac sollicitudin et, malesuada sagittis lacus.</div>
                </div>
                <div class="sim-row-header1-slider-right sim-row-edit" data-type="image-link"><a href="#"><img src="https://dummyimage.com/200x167/83cfcc/fff" /></a></div>
            </div>
        </div> <!-- end sim-row-header1 -->
    </div> <!-- end sim-row -->
</div>

我想這樣來獲得我想要的價值：

var elements =  document.getElementById("newsletter-builder-area-center-frame-content").querySelectorAll("div.sim-row.ui-draggable");

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
      var hola = element.getAttribute("hola");
        alert("Name: "+hola+"\r\n");
        // var  data_template['id_template']=hola;
        var source_ = element.querySelectorAll('.sim-row-edit');
        alert( source_.length);
            for (var ab = 0; ab < source_.length; ab++) {
            var source = source_[ab];
            var type_source=source.getAttribute("data-type");
            if (type_source === "image"){
                var value=source.getAttribute("src");
                alert(source);
                alert(value);
            }
            else if (type_source === "image-link"){
                //  $(this).parent().parent();
                var href_source=source.nextSibling.getAttribute('href');
                var source_image=source.nextSibling.getAttribute('src');
                alert(href_source);
                alert(source_image);
            }
            else if(type_source === "link"){
                var url=source.getAttribute("href");
                var text_url=source.textContent;
                var value=url+';'+text_url;
                alert(value);
            }
            else if(type_source === "text"){
                var value=source.innerHTML;
                alert(value);
            }
            else if(type_source === "title"){
                var value=source.textContent;
                alert(value);
            }
            // var data_template[type_source_+ab]=value;
        }
    }

它顯示了“未定義”如何使用JavaScript在data-type =“ image-link”之后獲取值href和src，請提出任何解決方案，。

有人可以幫忙嗎？

謝謝！

Answer 1

我認為您可能想在您的內部使用此代碼：

否則（type_source ==='image-link'）

碼：

else if (type_source === "image-link") {
     var descendants = source.children;
     var href_source = descendants[0].getAttribute('href');
     var source_image = descendants[0].children[0].getAttribute('src');
     console.log(href_source);
     console.log(source_image);

}