We Keep Coding

How to get children id when I click the parent?

<div class="big" onclick="dataadd()">
<div id="a">child1</div>
<div id="b">child2</div>
</div>
When I click the div with class="big" tag, I wanna get the children's id or text.
I tried all several methods, but I can't handle it. Anyone know how to do it? Javascript or Jquery doesn't matter.
Thank you very much!

You can pass your clicked element by dataadd(this);
You may wonder how this comes inside the method. adding this keyword like above will refer to the current element.
Then using that element, you can find children and with each you can grab other details by loop through the children.
function dataadd(ele){
var children = $(ele).find('div');
children.each(function(idx, element){
console.log($(element).attr('id'));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big" onclick="dataadd(this)">
<div id="a">child1</div>
<div id="b">child2</div>
</div>

Use children() to selecting childs of element and use map() to mapping elements to id attribute.
$(".big").click(function(){
var ids = $(this).children().map(function(){
return this.id;
}).toArray();
console.log(ids);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big">
<div id="a">child1</div>
<div id="b">child2</div>
</div>
Also you can use simpler code as shown in bottom
$(".big").click(function(){
console.log(
$('> *', this).map((i, val) => val.id).toArray()
);
});

For a more modern way with ES6:
document.querySelector(".big").addEventListener('click', function(e){
[...e.target.children].forEach(function(child){
const { id, innerText } = child;
console.log(id, innerText);
})
})

You can pass the context using this and use querySelectorAll to get the div and then its id
function dataadd(elem) {
elem.querySelectorAll('div').forEach(function(item) {
console.log(item.id)
})
}
<div class="big" onclick="dataadd(this)">
<div id="a">child1</div>
<div id="b">child2</div>
</div>

function dataadd(){
$(this).children().each(function(){
console.log($(this).attr('id'));
})
}
This code will print ids of big div.

Jquery get closest a href attribute

I have the below markup and I am trying to get the href but always getting undefined. Any help is appreciated.
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
$container = $('.wrapper');
$container.on('click', '.bottomP', function (event) {
console.log($(this).closest('a').attr('href'));
});

Assuming that you fix the class/ID issue noted in the comments by Mohammad you could use:
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>

Aside from what Mohammad mentioned about needing to use .wrapper instead of #wrapper. I recommend using .find() instead of .closest(). .closest() does not work in IE, but that might not be an issue for you. you can also do something like this:
$("div.wrapper").on('click', '.bottomP', function () {
console.log($("div.wrapper a:first").attr('href'));
});
This will grab the first <a> tag inside the wrapper div.

Targeting Multiple Elements with One Function

I have a function that assigns dynamic classes to my div's. This function is a that runs on the page. After the page loads, all 10 of my primary 's have classes ".info1" or ".info2" etc...
I am trying to write a Jquery function that changes the class of the div you click on, and only that one. Here is what I have attempted:
$(".info" + (i ++)).click(function(){
$(".redditPost").toggleClass("show")
});
I have also tried:
$(".info" + (1 + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
And
$(".info" + (i + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
EDITED MY HTML: DIV RedditPost is actually a sibling to Info's parent
<div class="listrow news">
<div class="newscontainer read">
<div class=".info1"></div>
<div class="redditThumbnail"></div>
<div class="articleheader read">
</div>
<div class="redditPost mediumtext"></div>
</div>
My issue is two fold.
The variable selection for ".info" 1 - 10 isn't working because i doesn't have a value.
If I did target the correct element it would change all ".redditPost" classes instead of just targeting the nearest div.

Try like this.
$("[class^='info']").click(funtion(){
$(this).parent().find('.redditPost').toggleClass("show");
});
Alternative:
$('.listrow').each(function(){
var trigger = $(this).find("[class^='info']");
var target = $(this).find('.redditPost');
trigger.click(function(){
target.toggleClass("show");
});
});

Try this
$("div[class*='info']").click(function(){
$(this).parent().find(".redditPost").toggleClass("show")
});
Explanation:
$("div[class*='info'])
Handles click for every div with a class containing the string 'info'
$(this).parent().find(".redditPost")
Gets the redditPost class of the current clicked div

Since the class attribute can have several classes separated by spaces, you want to use the .filter() method with a RegEx to narrow down the element selection as follows:
$('div[class*="info"]').filter(function() {
return /\binfo\d+\b/g.test( $(this).attr('class') );
}).on('click', function() {
$(this).siblings('.redditPost').toggleClass('show');
});
.show {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listrow news">
<div class="newscontainer read">
<div class="info1">1</div>
<div class="redditThumbnailinfo">2</div>
<div class="articleheader read">3</div>
<div class="redditPost mediumtext">4</div>
</div>
</div>

Hide only on certain elements

I'm using a script that checks for any tag that also has a SRC="self". My function should function like this:
Check if img src="self"
If true, hide the parent div
If false, do nothing
Currently the function actually hides every img regardless of src. If I replace the jQuery hide() action then the function works perfectly. It just seems like it isn't quite performing the hide function like I anticipated.
function changeSourceAll() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('self') !== -1) {
$(".redditThumbnail").hide();
}
else (){}
}
}
changeSourceAll();
Sample HTML is below. I have multiple .listrow div elements identical to this and the function removes all the .redditThumbnail divs.
<div class="listrow news">
<div class="newscontainer">
<div class="redditThumbnail"></div>
<div class="articleheader news">
<div class="actionmenu">
<p class="mediumtext floatleft alignleft">
author
</p>
<div id="redditUsername"></div>
<div class="floatright">
<div class="redditPermalink material-icons"></div>
</div>
</div>
<p class="redditTitle mediatitle news"></p>
</div>
</div>
</div>
Thanks!

You could use an attribute-equals selector to find all of the <img> elements that point to "self" and then hide their parents :
// Hide the closest thumbnail for elements that match this constraint
$('img[src="self"]').closest('.redditThumbnail');
Example
$(function() {
$('button').click(function(){
$('img[src="self"]').closest('.redditThumbnail').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='redditThumbnail'>
A (has self)
<img src='self' />
</div>
<div class='redditThumbnail'>
B (doesn't have self)
<img src='self-test' />
</div>
<div class='redditThumbnail'>
C (has self)
<img src='self' />
</div>
<hr />
<button>Hide Self-Referencing Images</button>

The issue with hiding every img is because you select and hide all .redditThumbnail elements for every matching item. To fix this you could use this:
$(images[i]).closest('.redditThumbnail').hide();
However a better approach entirely would be to use filter() and find only the .redditThumbnail elements which match the requirements. Try this:
$('.redditThumbnail').filter(function() {
return $(this).find('img[src="self"]').length != 0;
}).hide();

You are hiding all: $(".redditThumbnail").hide();. I guess you should do something like $(images[i]).hide();

Multiple Click function on Javascript

I am new to javascript and i m using this script :
<script type="text/javascript">
$(document).ready
(function()
{
$('#apply').click(function()
{
$('#applyinfo').toggle("slow");
});
});
</script>
for the on click function when i click on apply it as to display the apply info div. this function is working however if i create multiple apply id it is not working. Please help me on this.

If you wish to bind the click function for multiple dom elements you can use it as,
$(document).ready(function() {
$('#apply,#apply1,#apply2').click(function() {
$('#applyinfo').toggle("slow");
});
});
with , delimiter. However you cant name the same id's for various html elements. In that case go for a class selector as #Pranav suggested in comments
For ex,
$('.applyClass').click(function() { .. } );

id should be unique , so use common class to all those items
<script type="text/javascript">
$(document).ready(function() {
$('.apply').click(function() {
//-^-- class selector
$('#applyinfo').toggle("slow");
});
});
</script>

Try this solution:
$(document).ready(function() {
$("[id$='apply']").click(function() {
$('#applyinfo').toggle("slow");
});
});

An id should be unique, so having multiple #apply and #applyinfo isn't a option. Instead, switch to classes.
The function depends on your HTML though.
If .applyinfo is a child of .apply this works:
HTML:
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
jQuery:
$(function() {
$('.apply').click(function() {
$(this).find('.applyinfo').toggle("slow");
});
});
DEMO
$(function() {
$('.apply').click(function() {
$(this).find('.applyinfo').toggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
If the .applyinfo is not a child of .apply we need to find the matching div. The function then becomes:
HTML:
<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>
<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>
jQuery:
$(function() {
$('[class^=apply-]').click(function() {
var nr = $(this).attr('class').split("-").pop() ,
selector = '.applyinfo-'+nr;
$(selector).toggle("slow");
});
});
DEMO
$(function() {
$('[class^=apply-]').click(function() {
var nr = $(this).attr('class').split("-").pop() ,
selector = '.applyinfo-'+nr;
$(selector).toggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>
<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>