We Keep Coding

How to get the text of the inside element of the next div using jquery?

I have two divs... Then when I clicked the 1st div, i want to get the text inside of h3 of the 2nd div
Here is my codes... But none of the jquery code is working.. any help to fix my code, please... thanks
HTML
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>
JQUERY / JAVASCRIPT
$('.timeline-badge').on('click', function() {
alert($(this).closest(".timeline-panel + div + h3").text());
alert($( '.timeline-badge > div:eq(0) + h3:eq(0)' ).children().text());
alert($(this).nextAll( '.timeline-heading').eq(0).innerhtml);
});
http://jsfiddle.net/rK4qc/119/

The .timeline-panel is next sibling of .timeline-badge. So you should use .next() to selecting it. Then use .find() to finding .timeline-title in it.
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>

Use Jquery's siblings selectors https://api.jquery.com/siblings/
$('.timeline-badge').on('click', function() {
console.log($(this).siblings());
});

Go get it by the class name of h3
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});

You can get the value of your h3 tag with:
$('div.timeline-panel div.timeline-heading h3.timeline-title').val();

use this code.
$(document).on("click",".timeline-badge",function() {
alert("H3 IS " + $('h3.timeline-title').text());
});
and check this fiddle for the code.
http://jsfiddle.net/rK4qc/121/
For the second div just add div for it and get the text user the .text() function.

this will work for you:-
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});

Get parent of the parent of div

I have searched and tried many things to do this such as closest() and parents() and parent() and find() But i couldnt make it to work at all .
I have this html
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'></div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'></div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng"></div>
</div>
</div>
</div>
So what i want is when i click on on div class deletepng i want to remove the two divs unlikepng and likepng .
this js
$(document).on ("click", ".deletepng", function () {
$this = $(this);
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
});
I just wonder why they dont work those my trying . Where it can be my mistake ?
EDIT:
i dont know if this have a role or not , i have what i tried inside Dialog box like that
$(document).on ("click", ".deletepng", function () {
$this = $(this);
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>'); // do something here
$(this).dialog("close");
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
}
}
});
});

use closest then use the second argument as the context.
$(document).on("click", ".deletepng", function() {
var $holder = $(this).closest('.like_holder');
$('.likepng, .unlikepng', $holder).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width='28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'>hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'>like</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'>unlike</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete</div>
</div>
</div>
</div>
EDIT
Since your update, you need to set a global variable to remember $this or the container/holder. try this:-
var $holder;
$(document).on("click", ".deletepng", function() {
$holder = $(this).closest('.like_holder');
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>');
$(this).dialog("close");
$('.likepng, .unlikepng', $holder).remove();
}
}
});
});

$this.closest(".like").html(); => this will return HTML of parent div, where delete button is. Not removing the element
$this.parents(".like_holder").html() => this will return html of div.message_holder. Not removing the element.
$this.closest(".like_holder").html() => this will return html of div.like_holder
$this.parent().parent().html(); close enogh, but still far => html of div.like_holder
$this.closest(".like_holder").find(".like_holder").html(); return null => no child element with class like_holder in div.like_holder.
Kind of example
$(document).on ("click", ".deletepng", function () {
var $parent = $(this).parent().parent();
$parent.find('.likepng').remove();
$parent.find('.unlikepng').remove();
});
.deletepng{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'> like me</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'> unlike me</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete button</div>
</div>
</div>
</div>
UPDATE
If you want to make it from dialog box, or other things - you can't use this variable. This is not making any sense. You should provide unique id to your message_box and then use it, like
$(id_of_message_box).find('.likepng, .unlikepng').remove()
or as I can see from your code:
var $parent = $this.parent().parent();
$parent.find('.likepng, .unlikepng').remove();
It means you should use $this in your function instead of $(this)

You can access the parents parent of your $(this) like:
var likeholder;
likeholder = $(this).parent().parent();
However this is generally ill advised. You'll have a jquery object though.
Let me know how you get on

In order to select the parent of a parent of an element you try this:
$(document).on ("click", ".deletepng", function () {
alert( $($(this).parent()).parent().html());
});
Since you can only execute the parent() method on Jquery Objects.
Here's an example unrelated to your code. JSFiddle.

Try this, you need sibling of parent;
alert( $this.closest(".like").parent().find(".unlikescore").html());
alert ($this.closest('.like').siblings('.unlikepng').html()) ;
working js fiddle

Multiple element, same class, get value of one element - jquery

I have this multiple elements with the same class.
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
1
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
2
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
3
</div>
</div>
If I click the the <a> tag on the first div, it should alert the value of .product-list-col value which is 1
if I click the second div of anchor tag, it should alert 2
here's the code for it
$(".dup-class").on('click', function() {
cont = $(this + " .product-list-col").text();
alert(cont);
});
Any solution for this stuff?
Here's the jsfiddle of it: http://jsfiddle.net/Vigiliance/PLeDs/3/

You could use siblings(), the reason why your code doesn't work is because it's selecting all .product-list-col
$(".dup-class").on('click', function () {
cont = $(this).siblings('.product-list-col').text();
alert(cont);
});
or use .next()
$(".dup-class").on('click', function () {
cont = $(this).next('.product-list-col').text();
alert(cont);
});

do this:
$(".dup-class").on('click', function() {
cont = $(this).next().text(); // this is the line where change done
alert(cont);
});
http://jsfiddle.net/PLeDs/2/

how to stop repetition in jquery code?

I'm trying to make a image library and my code contains much repetition. Does anyone of you have an idea on how to make this work better?
Here is a exemple of the code
HTML
<div id="wrapper">
<div id="buttoncont">
<button id="all" type="button">All</button>
<button id="dog" type="button">Dog</button>
<button id="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>
JS
$("#cat").click(function () {
$("img.dog_img").hide();
$("img.cat_img").show();
});
$("#dog").click(function () {
$("img.cat_img").hide();
$("img.dog_img").show();
});
$("#all").click(function () {
$(".cat_img, .dog_img").show();
});

First: you need to set a default selected to make the Toggle work as expected.
Use CSS Classes to make the divs into one group(class) and bind the event to it, see the HTML:
<div id="wrapper">
<div id="buttoncont">
<button id="all" type="button">All</button>
<button class=toggle id="dog" type="button">Dog</button>
<button class=toggle id="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>
And on the Javascript Code, do a function to do it for you and use jQuery Toggle:
function toggleImg(){
$('img.dog_img').toggle();
$('img.cat_img').toggle();
}
$(".toggle").click(function () {
toggleImg();
});
$("#all").click(function () {
$(".cat_img, .dog_img").show();
});
But on the onLoad event of your page Toggle one of they indivually to make it the default selected, this way Toggling the two, always only one will be visible.
$('html').ready(function(){
$('img.cat_img').toggle();
});

function toggleImages(e){
$('img').hide();
$('img.'+e.target.id+'_img').show();
}
$("#cat").click(toggleImages);
$("#dog").click(toggleImages);
$("#all").click(function () {
$(".cat_img, .dog_img").show();
});
<div id="wrapper">
<div id="buttoncont">
<button id="all" type="button">All</button>
<button id="dog" type="button">Dog</button>
<button id="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>

I would do it like this
Keep the html as you have it.
$(".toggle").click(
function() {
$("."+ $(this).attr('id') + "_img").toggle()
}
);
$("#all").click(
function() {
$("img[class$='_img']").show()
}
);
This way you can add as many images and buttons as you want without modifying your javascript
Here is a jsFiddle

You can use this :
$('#buttoncont button').click(function(){
if(this.id=='all'){
$('img').show();
}else{
$('img').hide().filter('.'+ this.id +'_img').show();
}
})
Fiddle : http://jsfiddle.net/b65EL/

An idea
$("#all").click(function(){
$(".cat_img, .dog_img").show();
}
$("#dog, #cat").click(function(){
$("img."+this.id+"_img").toggle();
}

Remove the ID attributes on the buttons unless you need them for something else.
Add a custom attribute to the buttons, such as:
<button id="cat" type="button" image-clicker="cat_img">Cat</button>
Then add this jquery to the page (I didn't test this so you may have to fix minor issues with it):
$(function(){
$("[image-clicker]").each(function(){
var buttonClicked = $(this);
var targetID = buttonClicked.attr("image-clicker");
var targetElement = $("#"+targetID);
$(this).click(function(){
// hide other images
$("[image-clicker]").hide();
targetElement.show();
});
};
});

Depending on the surrounding HTML, you may have to modify this. But with JUST the HTML you've shared, you can do this:
$(document).on('click', 'button', function(){
$('img').hide();
$("." + this.id + "_img").show();
//Workaround for '#all'
if( this.id === 'all' ){
$('img').show();
}
});
You could also modify your HTML to take advantage of the data- attribute:
<div id="wrapper">
<div id="buttoncont">
<button data-show="dog, cat" type="button">All</button>
<button data-show="dog" type="button">Dog</button>
<button data-show="cat" type="button">Cat</button>
</div>
<img class="cat_img" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
<img class="dog_img" src="http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg" />
</div>
JS (untested, but should work):
$(document).on('click', 'button', function(){
var arrShow = this.getAttribute('data-show').split(/\s*,\s*/);
$('img').hide();
for( var i = arrShow.length; i-- > 0; ){
$('.' + arrShow[i] + '_img').show();
}
});

Nees help to show appropriate content when div clicked JQuery

I'm trying to show appropriate content using this method: determine id of the clicked div, than open div content with determined id + '-box'. But it doesn't work.
JQuery that doesn't work:
$(".portfolio-apps section").click(function() {
var currentID = '#' + $(this).attr('id');
console&&console.log(currentID);
var currentIDBox = currentID + "-box";
console&&console.log(currentIDBox);
$(currentID).click(function() {
$('.portfolio-entry-text').hide('fast');
var bcn = $(currentIDBox);
if ($('.box-content').is(':visible')) {
$('.box-content').hide();
bcn.show();
}
else {
$('.box-content').hide();
bcn.slideToggle(200);
}
});
});
Similar JQuery that is working:
$("#gterminal").click(function() {
$('.portfolio-entry-text').hide('fast');
var bcn = $('#gterminal-box');
if ($('.box-content').is(':visible')) {
$('.box-content').hide();
bcn.show();
}
else {
$('.box-content').hide();
bcn.slideToggle(200);
}
});
HTML
<div class="portfolio-apps clearfix">
<section class="button" id="gterminal">
<span>Google in Terminal</span>
</section>
<section class="button" id="MySQLToJSON">
<span>MySQL to JSON</span>
</section>
</div>
<div id="wrapper" >
<div class="box-content" id="gterminal-box">
<p>BOX 1</p>
</div>
<div class="box-content" id="MySQLToJSON-box">
<p>BOX 2</p>
</div>
</div>

You're binding a .click event internally, which means that the -box showing/hiding won't be triggered until a second click. This doesn't make sense to me. If you just remove the internal .click binding, it seems to work quite nicely:
http://jsfiddle.net/Th3wT/