Получите значение абзацев с тем же классом

Question

, так что в основном у меня есть около 20 абзацев, которые находятся внутри слайдера, и с каждым абзацем есть кнопка совместного доступа, которая копирует ее innerHTML.

Пример:

<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> 

Могу ли я сделать что-то вроде массива, чтобы получить один пункт за один раз? Потому что, когда я нажимаю первую кнопку совместного доступа, код копирует первый абзац и, если я нажимаю вторую кнопку общего доступа, у меня все еще есть первый абзац, который копируется, а не второй. Надеюсь, я объяснил свою проблему правильно и благодарю вас заранее.

Answer 1

попробовать этот

$(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>

Answer 2

попробовать:

$(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>

Answer 3

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

также упомянуть this в Funtion

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

Answer 4

Попробуйте

$('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>

Answer 5

Что вы можете сделать, это

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

Answer 6

вы можете попробовать, как эта функция доля

<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>

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