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!
javascript jquery html onclick
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
asked Nov 14 '18 at 8:13
JuliaJulia
776
add a comment |
<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!
javascript jquery html onclick
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
asked Nov 14 '18 at 8:13
JuliaJulia
776
add a comment |
<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!
javascript jquery html onclick
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
asked Nov 14 '18 at 8:13
JuliaJulia
776
<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!
javascript jquery html onclick
javascript jquery html onclick
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
asked Nov 14 '18 at 8:13
JuliaJulia
776
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
asked Nov 14 '18 at 8:13
JuliaJulia
776
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
edited Nov 14 '18 at 8:28
Mohammad
15.6k123462
15.6k123462
asked Nov 14 '18 at 8:13
JuliaJulia
776
asked Nov 14 '18 at 8:13
JuliaJulia
776
asked Nov 14 '18 at 8:13
JuliaJulia
776
776
add a comment |
add a comment |
5 Answers
5
active
oldest
votes
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>answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
add a comment |
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()
);
);
answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
add a comment |
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);
)
)
answered Nov 14 '18 at 10:16
ptdienptdien
744
add a comment |
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>answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
add a comment |
function dataadd()
$(this).children().each(function()
console.log($(this).attr('id'));
)
This code will print ids of big div.
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
2
This won't work asthiswill be thewindowin your example, not the element which was clicked.
– Rory McCrossan
Nov 14 '18 at 8:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295625%2fhow-to-get-children-id-when-i-click-the-parent%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
add a comment |
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>answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
add a comment |
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>answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
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>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>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>answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
edited Nov 16 '18 at 5:45
answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
answered Nov 14 '18 at 8:18
SilentCoderSilentCoder
1,79011020
1,79011020
add a comment |
add a comment |
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()
);
);
answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
add a comment |
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()
);
);
answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
add a comment |
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()
);
);
answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
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()
);
);
$(".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>$(".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>answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
edited Nov 14 '18 at 8:38
answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
answered Nov 14 '18 at 8:21
MohammadMohammad
15.6k123462
15.6k123462
add a comment |
add a comment |
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);
)
)
answered Nov 14 '18 at 10:16
ptdienptdien
744
add a comment |
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);
)
)
answered Nov 14 '18 at 10:16
ptdienptdien
744
add a comment |
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);
)
)
answered Nov 14 '18 at 10:16
ptdienptdien
744
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);
)
)
answered Nov 14 '18 at 10:16
ptdienptdien
744
answered Nov 14 '18 at 10:16
ptdienptdien
744
answered Nov 14 '18 at 10:16
ptdienptdien
744
answered Nov 14 '18 at 10:16
ptdienptdien
744
744
add a comment |
add a comment |
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>answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
add a comment |
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>answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
add a comment |
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>answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
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(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(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>answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
answered Nov 14 '18 at 8:27
brkbrk
26.6k32040
26.6k32040
add a comment |
add a comment |
function dataadd()
$(this).children().each(function()
console.log($(this).attr('id'));
)
This code will print ids of big div.
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
2
This won't work asthiswill be thewindowin your example, not the element which was clicked.
– Rory McCrossan
Nov 14 '18 at 8:32
add a comment |
function dataadd()
$(this).children().each(function()
console.log($(this).attr('id'));
)
This code will print ids of big div.
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
2
This won't work asthiswill be thewindowin your example, not the element which was clicked.
– Rory McCrossan
Nov 14 '18 at 8:32
add a comment |
function dataadd()
$(this).children().each(function()
console.log($(this).attr('id'));
)
This code will print ids of big div.
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
function dataadd()
$(this).children().each(function()
console.log($(this).attr('id'));
)
This code will print ids of big div.
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
edited Nov 16 '18 at 4:56
Alive to Die
55.8k82869
55.8k82869
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
answered Nov 14 '18 at 8:23
Tài Dương DanhTài Dương Danh
1
1
2
This won't work asthiswill be thewindowin your example, not the element which was clicked.
– Rory McCrossan
Nov 14 '18 at 8:32
add a comment |
2
This won't work asthiswill be thewindowin your example, not the element which was clicked.
– Rory McCrossan
Nov 14 '18 at 8:32
2
2
This won't work as
this will be the window in your example, not the element which was clicked.– Rory McCrossan
Nov 14 '18 at 8:32
This won't work as
this will be the window in your example, not the element which was clicked.– Rory McCrossan
Nov 14 '18 at 8:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295625%2fhow-to-get-children-id-when-i-click-the-parent%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
