CODEWITHSUNDEEP
javascriptjquery
Ray Joe
Ray Joe

Reputation: 202

Get value of paragraphs with same class

so basically I have around 20 paragraphs that are inside a slider, and with every paragraph there's a share button that copies it's innerHTML.

Example:

<p class="parag">content</p>
<button onclick="share();"></button>
<p class="parag">diff content</p>
<button onclick="share();"></button>
<p class="parag">another content</p>
<button onclick="share();"></button>

Can I make something like an array in order to get one paragraph at a time? Because when I press the first share button the code copies the first paragraph and if I press the second share button I still have the first paragraph being copied and not the second one. Hope I explained my issue right and thank you in advance.

Upvotes: 1

Views: 93

Answers (6)

Karan
Karan

Reputation: 2112

you can try like this

<p class="parag">content</p> <button onclick="share(this);"></button> <p class="parag">diff content</p><button onclick="share(this);"></button> <p class="parag">another content</p><button onclick="share(this);"></button>

share function

function share(that){ alert($(that).prev('.parag').html()); }

Upvotes: 0

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

try this

$(document).ready(function() {
   $('button').click(function(e) {
     alert($(this).prev(".parag").text());
   });
})
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parag">content</p>
<button onclick="share();">content</button>
<p class="parag">diff content</p>
<button onclick="share();">diff</button>
<p class="parag">another content</p>
<button onclick="share();">another</button>

Upvotes: 0

John R
John R

Reputation: 2791

Try this

$('button').click(function(e) {
  alert($(this).prev().text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p class="parag">content</p>
<button>Share</button>
<p class="parag">diff content</p>
<button>Share</button>
<p class="parag">another content</p>
<button>Share</button>

Pure JS:

function share(ele) {
  alert(ele.previousElementSibling.innerHTML);
}
<p class="parag">content</p>
<button onclick="share(this);">Share</button>
<p class="parag">diff content</p>
<button onclick="share(this);">Share</button>
<p class="parag">another content</p>
<button onclick="share(this);">Share</button>

Upvotes: 0

P. Frank
P. Frank

Reputation: 5745

try:

$(document).ready(function() {
    myArray = [];
    $("p").each(function(){ 
         alert($(this).attr("class")) 
         myArray.push($(this).attr("class"))
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parag">content</p>
<button onclick="share();"></button>
<p class="parag">diff content</p>
<button onclick="share();"></button>
<p class="parag">another content</p>
<button onclick="share();"></button>

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15913

What you can do is

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="parag">content</p>
<button>1</button>
<p class="parag">diff content</p>
<button>2</button>
<p class="parag">another content</p>

Javascript

function share(button) {
    alert(button.prev().text());
}
$(document).ready(function () {
    $('button').click(function () {
        share($(this))
     });
});

JS Fiddle Demo

Upvotes: 0

Athi Krishnan
Athi Krishnan

Reputation: 159

function share(element) {
    $(element).prev('p').text();    //the p tag content based on the button
}

also mention this in the funtion

<button onclick="share(this);"></button>

Upvotes: 0

Related Questions