function replaceLink(href_array){
    $('.externalLink').each(function(index){
        $(this).replaceWith(function() {
            if ($(this).text() != "") {
                return $('<a />').append($(this).contents()).attr('href', href_array[index]);
            }
            else { // do not use
                return $('<a />').append(href_array[index]).attr('href', href_array[index]);
            }
        });
    });
};

प्रारंभिक पृष्ठ में निम्नलिखित संरचना है

body 
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
/body

स्क्रिप्ट के बाद होना चाहिए

body 
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
/body

लेकिन यह पता चला है

body 
    p /p a#href
    p /p a#href 
    p /p a#href
    p /p a#href
    p /p a#href
    p /p a#href
/body

वह कैसे बना?

सबसे नीचे जैसा कि यह ऊपर होना चाहिए कि यह कैसे निकलता है

1
Костя Мельник 1 मार्च 2019, 16:17

1 उत्तर

सबसे बढ़िया उत्तर

आप div टैग्स को p टैग के अंदर बना रहे हैं, जो गलत है और ओपनिंग div टैग अपने आप p टैग को इसके पहले बंद कर देगा, इसलिए replaceWith काम करता है गलत तरीके से।

div के अंदर एक div आज़माएं।

स्रोत - क्यों

टैग में

नहीं हो सकता इसके अंदर टैग करें?

var href_array = [
  "Href1", "Href2", "Href3", "Href4", "Href5", "Href6"
]
function replaceLink(href_array){
    $('.externalLink').each(function(index){
        $(this).replaceWith(function() {
            if ($(this).text() != "") {
                return $('<a />').append($(this).contents()).attr('href', href_array[index]);
            }
            else { // do not use
                return $('<a />').append(href_array[index]).attr('href', href_array[index]);
            }
        });
    });
}

replaceLink(href_array)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div>
    <div class="externalLink">A</div>
  </div>
  <div>
    <div class="externalLink">B</div>
  </div>
  <div>
    <div class="externalLink">C</div>
  </div>
  <div>
    <div class="externalLink">D</div>
  </div>
  <div>
    <div class="externalLink">E</div>
  </div>
  <div>
    <div class="externalLink">F</div>
</body>

</html>
2
Anurag Srivastava 1 मार्च 2019, 13:37