Develop Reference

How to get the attribute value of the closest element

Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.
here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid. how can i do this?
HTML
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Jquery
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});

To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid
Find index of clicked innerDiv using index('.innerDiv)
Use that index to add class using eq
Add some sample css to testclass for testing
Syntax error in your code - closing quotes missing for class- second-most-innerdiv
Codepen - https://codepen.io/nagasai/pen/
working example
$('.innerDiv').on('click',function(){
$('.inid').eq($(this).index('.innerDiv')).addClass('testclass');
console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr'))
});
.testclass{
background: red;
height: 10px;
width:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv">
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>

Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.
$('.innerDiv').on('click',function(){
var inid = $(this).closest('.parent_div').find('.inid');
inid.addClass('testclass');
console.log('selected -> ' + inid.attr(data-attr));
});
Source: https://api.jquery.com/closest/

if one item is clicked, remove the other items?

I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!

Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>

Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.

You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();

For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>

$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

Only show parent if child contains certain string

I have a group of divs that appear on multiple pages, that have this pattern:
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagOne
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagTwo
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagThree
</div>
</div>
</div>
</div>
</div>
This group appears on multiple pages.
My ideal javascript/jquery solution is something like this:
display:none on all div class="entry"
if child div class="entry-title" contains #something, change parent div class="entry" to display:block
so that on Page One I can insert this code to only show #hashtagOne, on Page Two only #hashtagTwo, etc. etc.

Try something like this:
$('.entry-title').each(function(i,v){
if ($(this).text().trim().charAt(0) =="#") {
$(this).closest('.entry').show();
}
});
https://jsfiddle.net/0ybstx9o/

This simply works fine :
$(document).ready(function(){
$(".entry").each(function(){
if($(this).find(".entry-title:contains('#something')").length > 0){
$(this).css("display","block");
}
});
});

Its pretty simple, just use :contains() and .closest() together either on page load or whatever event you want this display:block behavior to run.
As you want to show based on differnt pages, I suggest to use page title and set it to title="Page One" and title="Page Two" etc and then compare it in document ready state and show accordingly the desired div
jQuery(document).ready(function(){
jQuery('div.entry').hide();
if(jQuery(document).find("title").text() == 'Page One')
{
jQuery( "div.entry-title:contains('#something')" ).closest('.entry').show();
}
else if(jQuery(document).find("title").text() == 'Page Two')
{
jQuery( "div.entry-title:contains('#something Else')" ).closest('.entry').show();
}
});

$(".entry").find(".entry-title").text(function(key, text) {
if (text.indexOf("#")>=0) {
$(this).parents(".entry").hide()
}
})
Here is the working Plunker

JQuery - Show multiple divs

I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>

You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}

How to get child div contents from multiple parent divs with same id when each of them is clicked

I have multiple divs with same id , i need to get the content of child's div when the parent div is clicked, the divs are dynamically created. The following code explains that :
i have php file that generate the multiple divs with the same id as follows :
<div id="display" style="display: block;">
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahrish Rizwan</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahar Imtiaz</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
</div>
now i need to get the content of each display_box through jquery , can any one help me out this ?

Try this (see fiddle console)
$(document).on('click','#display',function(){
$(this).find('.display_box').each(function(){
console.log($(this).html()) // returns overall content
});
});
DEMO
OR
$(document).on('click','.display_box',function(){
console.log($(this).html()) // returns clicked content
});
DEMO

$(document).on('click','.display_box',function(){
alert($(this).html())
});