How to get parent value of div a value
0
I have html code:
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false" >INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
I need when i click on li element (A, B or C) to get value of MAINITEM. I have around 10main items on page and need to get this MAINITEM of value.
I try using:
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function () {
alert($(this).closest('.dropdown-toggle').find('a').text());
})
But i get empty result.
jquery parent
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
add a comment |
0
I have html code:
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false" >INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
I need when i click on li element (A, B or C) to get value of MAINITEM. I have around 10main items on page and need to get this MAINITEM of value.
I try using:
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function () {
alert($(this).closest('.dropdown-toggle').find('a').text());
})
But i get empty result.
jquery parent
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
Have you considered usingparent?
– Scott Hunter
Jan 20 at 14:03
1
Please provide HTML!
– Pablo
Jan 20 at 14:05
1
You don't target the right parent... Use.closest('.dropdown').find("a").text()... Because.closest('.dropdown-toggle')is theaelement... And not a "parent".
– Louys Patrice Bessette
Jan 20 at 14:10
add a comment |
0
0
0
I have html code:
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false" >INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
I need when i click on li element (A, B or C) to get value of MAINITEM. I have around 10main items on page and need to get this MAINITEM of value.
I try using:
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function () {
alert($(this).closest('.dropdown-toggle').find('a').text());
})
But i get empty result.
jquery parent
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
I have html code:
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false" >INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
I need when i click on li element (A, B or C) to get value of MAINITEM. I have around 10main items on page and need to get this MAINITEM of value.
I try using:
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function () {
alert($(this).closest('.dropdown-toggle').find('a').text());
})
But i get empty result.
jquery parent
jquery parent
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
edited Jan 20 at 14:06
Louys Patrice Bessette
19k42244
19k42244
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
asked Jan 20 at 14:00
Igor PetevIgor Petev
310114
310114
Have you considered usingparent?
– Scott Hunter
Jan 20 at 14:03
1
Please provide HTML!
– Pablo
Jan 20 at 14:05
1
You don't target the right parent... Use.closest('.dropdown').find("a").text()... Because.closest('.dropdown-toggle')is theaelement... And not a "parent".
– Louys Patrice Bessette
Jan 20 at 14:10
add a comment |
Have you considered usingparent?
– Scott Hunter
Jan 20 at 14:03
1
Please provide HTML!
– Pablo
Jan 20 at 14:05
1
You don't target the right parent... Use.closest('.dropdown').find("a").text()... Because.closest('.dropdown-toggle')is theaelement... And not a "parent".
– Louys Patrice Bessette
Jan 20 at 14:10
Have you considered using
parent?– Scott Hunter
Jan 20 at 14:03
Have you considered using
parent?– Scott Hunter
Jan 20 at 14:03
1
1
Please provide HTML!
– Pablo
Jan 20 at 14:05
Please provide HTML!
– Pablo
Jan 20 at 14:05
1
1
You don't target the right parent... Use
.closest('.dropdown').find("a").text()... Because .closest('.dropdown-toggle') is the a element... And not a "parent".– Louys Patrice Bessette
Jan 20 at 14:10
You don't target the right parent... Use
.closest('.dropdown').find("a").text()... Because .closest('.dropdown-toggle') is the a element... And not a "parent".– Louys Patrice Bessette
Jan 20 at 14:10
add a comment |
2 Answers
2
active
oldest
votes
1
Use this
http://jsfiddle.net/o90wnmuL/
jQuery(".dropdown li a").click(function(){
text = jQuery(this).closest(".dropdown").find(".dropdown-toggle").text();
console.log(text)
});
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
add a comment |
2
The jQuery.closest() function only filters through parent elements. Since you are combining two different selectors you should use common parent for both both target elements. In your case the common parent is .dropdown.
Additionally you need to make sure you are filtering through the correct a element because .dropdown can have many anchor tags. In your case you can use a.btn.
Below is a working example with the changes suggested above.
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
alert($(this).closest('.dropdown').find('a.btn').text());
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>answered Jan 20 at 14:19
PabloPablo
3,49462844
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
});
}
});
draft saved
draft discarded
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%2f54277201%2fhow-to-get-parent-value-of-div-a-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Use this
http://jsfiddle.net/o90wnmuL/
jQuery(".dropdown li a").click(function(){
text = jQuery(this).closest(".dropdown").find(".dropdown-toggle").text();
console.log(text)
});
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
add a comment |
1
Use this
http://jsfiddle.net/o90wnmuL/
jQuery(".dropdown li a").click(function(){
text = jQuery(this).closest(".dropdown").find(".dropdown-toggle").text();
console.log(text)
});
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
add a comment |
1
1
1
Use this
http://jsfiddle.net/o90wnmuL/
jQuery(".dropdown li a").click(function(){
text = jQuery(this).closest(".dropdown").find(".dropdown-toggle").text();
console.log(text)
});
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
Use this
http://jsfiddle.net/o90wnmuL/
jQuery(".dropdown li a").click(function(){
text = jQuery(this).closest(".dropdown").find(".dropdown-toggle").text();
console.log(text)
});
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
answered Jan 20 at 14:13
Alaksandar Jesus GeneAlaksandar Jesus Gene
2,57362545
2,57362545
add a comment |
add a comment |
2
The jQuery.closest() function only filters through parent elements. Since you are combining two different selectors you should use common parent for both both target elements. In your case the common parent is .dropdown.
Additionally you need to make sure you are filtering through the correct a element because .dropdown can have many anchor tags. In your case you can use a.btn.
Below is a working example with the changes suggested above.
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
alert($(this).closest('.dropdown').find('a.btn').text());
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>answered Jan 20 at 14:19
PabloPablo
3,49462844
add a comment |
2
The jQuery.closest() function only filters through parent elements. Since you are combining two different selectors you should use common parent for both both target elements. In your case the common parent is .dropdown.
Additionally you need to make sure you are filtering through the correct a element because .dropdown can have many anchor tags. In your case you can use a.btn.
Below is a working example with the changes suggested above.
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
alert($(this).closest('.dropdown').find('a.btn').text());
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>answered Jan 20 at 14:19
PabloPablo
3,49462844
add a comment |
2
2
2
The jQuery.closest() function only filters through parent elements. Since you are combining two different selectors you should use common parent for both both target elements. In your case the common parent is .dropdown.
Additionally you need to make sure you are filtering through the correct a element because .dropdown can have many anchor tags. In your case you can use a.btn.
Below is a working example with the changes suggested above.
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
alert($(this).closest('.dropdown').find('a.btn').text());
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>answered Jan 20 at 14:19
PabloPablo
3,49462844
The jQuery.closest() function only filters through parent elements. Since you are combining two different selectors you should use common parent for both both target elements. In your case the common parent is .dropdown.
Additionally you need to make sure you are filtering through the correct a element because .dropdown can have many anchor tags. In your case you can use a.btn.
Below is a working example with the changes suggested above.
$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
alert($(this).closest('.dropdown').find('a.btn').text());
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
alert($(this).closest('.dropdown').find('a.btn').text());
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
alert($(this).closest('.dropdown').find('a.btn').text());
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
</div>
<div class="dropdown dropdown-inline">
<a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
<ul class="dropdown-menu dropdownhover-bottom" role="menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>answered Jan 20 at 14:19
PabloPablo
3,49462844
answered Jan 20 at 14:19
PabloPablo
3,49462844
answered Jan 20 at 14:19
PabloPablo
3,49462844
answered Jan 20 at 14:19
PabloPablo
3,49462844
3,49462844
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54277201%2fhow-to-get-parent-value-of-div-a-value%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
Have you considered using
parent?– Scott Hunter
Jan 20 at 14:03
1
Please provide HTML!
– Pablo
Jan 20 at 14:05
1
You don't target the right parent... Use
.closest('.dropdown').find("a").text()... Because.closest('.dropdown-toggle')is theaelement... And not a "parent".– Louys Patrice Bessette
Jan 20 at 14:10