If I click on the link A1-810 I am getting text A1-810 in anchortext variable. Now I want is when I click on A1-810 I should also get text ICONIA A-SERIES in parenttext or another variable
if A1-810 link is clicked I am getting output as
A1-810
Now I want output as
A1-810
ICONIA A-SERIES
Jquery code to get the text of the link.
JavaScript
x
9
1
$(document).ready(function() {
2
$(".list-unstyled a").on("click", function(e) {
3
e.preventDefault(); // don't follow the link
4
var anchortext = $(this).text();
5
var parenttext;
6
console.log(anchortext)
7
});
8
});
9
HTML CODE.
JavaScript
1
22
22
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<ul class="list-unstyled">
3
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA A-SERIES</a>
4
<ul class="list-unstyled">
5
<li><a href="#">A1-810</a></li>
6
<li><a href="#">A1-820</a></li>
7
</ul>
8
</li>
9
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA B-SERIES</a>
10
<ul class="list-unstyled">
11
<li><a href="#">B1-710</a> </li>
12
<li><a href="#">B1-720</a> </li>
13
</ul>
14
</li>
15
<li class="dropdown"><a href="" class="dropdown-toggle">LIQUID</a>
16
<ul class="list-unstyled">
17
<li><a href="">A1-S100</a> </li>
18
<li><a href="">Z200</a> </li>
19
</ul>
20
</li>
21
</ul>
22
Advertisement
Answer
You can do it like this.
JavaScript
1
2
1
var parenttext = $(this).closest("ul").prev("a").text();
2
Use .closest("ul")
to travel up to find the first ul
.
Then use .prev("a")
to get the previous sibling of the element type a(link)
.
Demo
JavaScript
1
8
1
$(document).ready(function() {
2
$(".list-unstyled a").on("click", function(e) {
3
e.preventDefault(); // don't follow the link
4
var anchortext = $(this).text();
5
var parenttext = $(this).closest("ul").prev("a").text();
6
console.log(anchortext,parenttext)
7
});
8
});
JavaScript
1
21
21
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<ul class="list-unstyled">
3
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA A-SERIES</a>
4
<ul class="list-unstyled">
5
<li><a href="#">A1-810</a></li>
6
<li><a href="#">A1-820</a></li>
7
</ul>
8
</li>
9
<li class="dropdown"><a href="#" class="dropdown-toggle">ICONIA B-SERIES</a>
10
<ul class="list-unstyled">
11
<li><a href="#">B1-710</a> </li>
12
<li><a href="#">B1-720</a> </li>
13
</ul>
14
</li>
15
<li class="dropdown"><a href="" class="dropdown-toggle">LIQUID</a>
16
<ul class="list-unstyled">
17
<li><a href="">A1-S100</a> </li>
18
<li><a href="">Z200</a> </li>
19
</ul>
20
</li>
21
</ul>