CODEWITHSUNDEEP
javascriptjquery
john
john

Reputation: 834

How to get the text value from divs with same class, and to display in another div?

Example here: http://codepen.io/agentmi6/pen/JoZZWm

how can i display the text of the green div in the grey div, when i click on the [+] icon? Ive tried many different scenarios but none works, can someone give me few pointers how can i do this, i would really appreciate.

    <div id="wrapper">
      <div class="container">
        <div class="first" id="f">
          <div class="set">+</div>
          this is the 1st element
        </div>
        <div class="first" id="s">
          <div class="set">+</div>
          this is the 2nd element
        </div>
        <div class="first" id="t">
          <div class="set">+</div>
          this is the 3rd element
        </div>
      </div>

      <div id="cc"></div>
    </div>

CSS 

.first{
  margin-top:5px;
  border:1px solid black;
  width:190px;
  height:40px;
  background-color:green;
}

#cc{
  margin-top:5px;
  width:190px;
  height:40px;
   border:1px solid black;
  background-color:grey;
}

.set{
  cursor:pointer;
  color:#fff;
  font-size:33px;
  float:right;
  border:1px solid white;
}

Upvotes: 3

Views: 1905

Answers (6)

dfsq
dfsq

Reputation: 193261

I guess that you don't want the copied text to contain "+" symbol? In this case you can do this:

$('.set').click(function() {
    var text = $(this.nextSibling).text().trim();
    $('#cc').text(text);
});

Demo: http://codepen.io/anon/pen/MYXXrr

Note, that it makes sense to improve HTML structure a little by wrapping the text into some container:

<div class="first" id="s">
  <div class="set">+</div>
  <div class="text">this is the 2nd element</div>
</div>

In this case, code would become much more reliable and cleaner:

$('.set').click(function() {
    var text = $(this).next('.text').text(); // or $(this).parent().find('.text')
    $('#cc').text(text);
});

Demo: http://codepen.io/anon/pen/ogyyoO

Upvotes: 1

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Put this in your head html section. Or bottom of body section. 

<script>
$(document).ready(function() {
  $('.set').on('click', function(){
   var text_val = $(this).closest('div.first').text();
   $('#cc').text(text_val);
  });
});
</script>

Upvotes: 1

Adlen Gharbi
Adlen Gharbi

Reputation: 204

You'll have to get the text of the .first div, i suggest you put the text into a tag so it'll be easy to get it, and so you don't get the + of the .get button. Here's the new JavaScript

$(document).ready(function(){

  $('.set').click(function(){

    // Get the text inside the span in the parent .first of the clicked .set button
    var text = $(this).parent('.first').find('span').text();
    $('#cc').text(text);
 });

});

The HTML would look like this

<div class="container">
  <div class="first" id="f">
    <div class="set">+</div>
    <span>this is the 1st element</span>
  </div>
  <div class="first" id="s">
    <div class="set">+</div>
    <span>this is the 2nd element</span>
  </div>
  <div class="first" id="t">
    <div class="set">+</div>
    <span>this is the 3rd element</span>
  </div>
</div>
<div id="cc"></div>

Here's an updated CodePen

Upvotes: 1

MP_Webby
MP_Webby

Reputation: 916

Here try this (fiddle: http://jsfiddle.net/nek9fona/)

JQ:

$(function(){
    $('.set').click(function(){
        var $this = $(this);
        var text = $this.parent('.first').text();

        $('#cc').text(text);

    });
});

Upvotes: 1

Med.Amine.Touil
Med.Amine.Touil

Reputation: 1235

This Code could help you

var tempText="";

$('.container .set').each(function(){
tempText=tempText+ $(this).html();

});

$('#cc').html(tempText);

Upvotes: 1

Qutayba
Qutayba

Reputation: 196

You can use this:

$(document).ready(function(){

  $('.set').click(function(){
    var text = $(this).parents("div.first").text();
    $("#cc").text(text);
  })

});

Upvotes: 1

Related Questions