CODEWITHSUNDEEP
jquery
Hurda
Hurda

Reputation: 9

jquery select title and output to do div

this my html

<section class="section">
   <div class="title">
      <h2>Title 1</h2>
   </div>
</section>
<section class="section">
   <div class="title">
     <h2>title 2</h2>
   </div>
</section>

this my selector jquery code

$( document ).ready(function() {
  var text = $('.section').find('.title h2').text(),
    $('.output a').html(text);
});

this out put to div

<div class="output">
 <a href="">title1title2</a>
</div>
<div class="output">
 <a href="">title1title2</a>
 </div>

ı want this is

<div class="output">
  <a href="">title1</a>
</div>
<div class="output">
 <a href="">title2</a>
 </div>

ı want this just take a section child in h2 and output in to div

Upvotes: 1

Views: 93

Answers (4)

Mark Baijens
Mark Baijens

Reputation: 13222

Loop over the title elements with the each() function. You can use the eq() function to get the corresponding a element in the output div.

Better would be to have an html structure that that is not depended on the same amount of elements in each selector.

$('.section .title h2').each(function(index) {
  //make sure to have the same amount of a elements in output as h2 elements in title.
  $('.output a').eq(index).html($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section">
  <div class="title">
    <h2>Title 1</h2>
  </div>
</section>
<section class="section">
  <div class="title">
    <h2>title 2</h2>
  </div>
</section>

<div class="output">
  <a href="">replace this</a>
</div>
<div class="output">
  <a href="">replace this</a>
</div>

Upvotes: 0

Akhtar Munir
Akhtar Munir

Reputation: 1769

This might help you. There are many ways you can achieve it.

<section class="section">
   <div class="title">
    <h2>Title 1</h2>
   </div>
</section>
<section class="section">
   <div class="title">
    <h2>title 2</h2>
   </div>
</section>
<div class='opt'></div>

$( document ).ready(function() {
$('.section').find('.title h2').each(function(){
  var text = $(this).text();
  $('.opt').append('<div class="output"><a href="">'+text+'</a></div>');
 })
});

Upvotes: 0

Rubix&#39;s Mind
Rubix&#39;s Mind

Reputation: 74

$(document).ready(function() { 
    $('.title').each(function(i){
        var text = $(this).find('h2').text()
        var output = $('.output a');

        output.each(function(){
            $(output[i]).html(text.toLowerCase());
        })
    })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section">
   <div class="title">
      <h2>Title 1</h2>
   </div>
</section>
<section class="section">
   <div class="title">
     <h2>title 2</h2>
   </div>
</section>

<div class="output">
 <a href="">title1title2</a>
</div>
<div class="output">
 <a href="">title1title2</a>
 </div>

Upvotes: 0

AbbasEbadian
AbbasEbadian

Reputation: 693

You can make it like this using $.each .

$('.section').find('.title h2').each(function(i, item){
    let text = $(item).text();
    $($('.output a')[i]).html(text);
});

This snippet sets i-th 'h2' tag text to i-th 'a' tag html.

Upvotes: 1

Related Questions