डिव टेक्स्ट को डिव में दूसरे डिव से बदलें

Question

<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

मैं एक टेक्स्ट के साथ बी टेक्स्ट और jQuery के साथ सी टेक्स्ट के साथ डी टेक्स्ट बदलना चाहता हूं। मैंने इस स्क्रिप्ट को जोड़ा:

$('.second').html($('.first').html());

लेकिन यह दोनों मुख्य div . में एक टेक्स्ट को बदल देता है

javascript html jquery css wordpress

2

nasir 20 अप्रैल 2020, 19:29

Answer 1

समस्या यह है कि जब आप टेक्स्ट() का उपयोग करते हैं तो यह संग्रह में पहला आइटम वापस कर देगा। इसका कोई सुराग नहीं है कि आप इसे अन्य तत्वों के लिए हथियाना चाहते हैं। तो आपको रिश्तों से निपटने के लिए इसे कोड करने की आवश्यकता है।

आपको प्रत्येक समूह पर लूप करना होगा और समूह में से प्रत्येक का चयन करना होगा।

$(".main").each( function () {
  var elem = $(this)
  var text = elem.find(".second").text()
  elem.find(".first").text(text)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

अन्य विकल्प सभी तत्वों और लूप ओवर का चयन करना है

var firsts = $(".first")
var seconds = $(".second")

firsts.each( function (index) {
  $(this).text(seconds.eq(index).text())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

और प्रत्येक के बिना

var firsts = $(".first")
var seconds = $(".second")

firsts.text( function (index) {
  return seconds.eq(index).text()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

4

epascarello 20 अप्रैल 2020, 19:38

Answer 2

समस्या इसलिए है क्योंकि आपका कोड सभी .first तत्वों का चयन करता है।

समस्या को ठीक करने के लिए आप प्रत्येक .main ब्लॉक में दूसरे div का चयन कर सकते हैं और text() को एक फ़ंक्शन प्रदान कर सकते हैं जो पिछले भाई का टेक्स्ट लौटाता है। ये कोशिश करें:

$('.main > div:nth-child(2)').text(function() {
  return $(this).prev().text();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="first">A text</div>
  <div class="second">B text</div>
</div>

<div class="main">
  <div class="first">C text</div>
  <div class="second">D text</div>
</div>

ध्यान दें कि इस दृष्टिकोण के साथ .first और .second कक्षाएं अब आवश्यक नहीं हैं

2

Rory McCrossan 20 अप्रैल 2020, 19:31

Answer 3

यहां आप .main पर लूप का प्रयास कर सकते हैं, .first और .second तत्व प्राप्त कर सकते हैं और मानों को स्वैप कर सकते हैं।

jQuery(function($) {

     $.each( $('.main'), function() {
  	var $first  = $(this).find('.first');
  	var firstHTML = $($first).html();
        var $second = $(this).find('.second');
   
        $($second).html(firstHTML);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

0

Sagar Bahadur Tamang 20 अप्रैल 2020, 19:39

डिव टेक्स्ट को डिव में दूसरे डिव से बदलें

3 जवाब

संबंधित सवाल

नए सवाल