CODEWITHSUNDEEP
javascriptjqueryhtmlparentsiblings
Subash Matheswaran
Subash Matheswaran

Reputation: 215

Select only the text inside div of sibling with class name, having many families of same class names

I wanted to copy the texts when the copy button is clicked. But, it copies the last(3rd) paragraph text when pressing any of the three buttons. It suppose to find previous sibling and copy that text when that particular button is clicked.

Here's my code. I think, I went wrong in the sibling thing. Let me know what I did wrong here:

//finding text to copy
$(document).ready(function(){
    $(document).on('click', '.phc-hashtags-box-button', function () {
		$(this).closest('.phc-hashtags-box').find('.phc-hashtags-box-tags');
		copy = copy +$(this).text();
    });
});

function copyToClipboard(element) {
    var $temp = $('<input>');
    $('body').append($temp);
    $temp.val($(element).text()).select();
    document.execCommand('copy');
    $temp.remove();
}
<!doctype html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    		
	</head>
	<body>    		    		
		<div class="phc-home-hashtags">
			<div class="container">
				<div class="phc-hashtags-box">
					<h3 class="phc-hashtags-box-title">Dog1</h3>
					<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #1st</p>
					<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
				</div>
				<div class="phc-hashtags-box">
					<h3 class="phc-hashtags-box-title">Dog2</h3>
					<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #2nd</p>
					<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
				</div>
				<div class="phc-hashtags-box">
					<h3 class="phc-hashtags-box-title">Dog3</h3>
					<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #3rd</p>
					<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
				</div>
			</div>
		</div>
	</body>
</html>

Upvotes: 0

Views: 111

Answers (2)

prufrofro
prufrofro

Reputation: 1497

I believe that when you pass '.phc-hashtags-box-tags' to the onclick attr of the button elements, it is matching all of the elements with that class and returning the last match for the value of your function.

Instead, try changing the button onclick handler to:

copyToClipboard($this)

That said, the execCommand function is not working in the provided snippet so verifying is difficult.

Perhaps try passing IDs or try to architect a more elegant solution. So many relative jQuery selectors will inevitably cause bugs as complexity grows.

Upvotes: 0

CodeAt30
CodeAt30

Reputation: 884

Instead of picking by class which gets all of the element with that class, limit your find to the parent() div of the button and it will only get the relevant text: 

$(document).ready(function(){
    $(document).on('click', '.phc-hashtags-box-button', function () {
        $(this).parent().find('.phc-hashtags-box-tags');  // notice the change on this line.
        copy = copy +$(this).text();
    });
});

EDIT:

Working solution:

Now i noticed - you are not passing a single element to copyToClipboard. 

<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>

is sending the saving to copy the last element from 3 found with this. Try instead:

<button onclick="copyToClipboard($(this).parent())" class="phc-hashtags-box-button">Copy</button>

Upvotes: 2

Related Questions