Question

I'm using a click function of Jquery to get the text value of submenus(Mobiles,Camera). I also want to get the text vale of parent element of these items(Electronics). How can I achieve this using JQuery

<li class="dropdown-submenu" id="subCategory">
  <a class="insideElement" tabindex="-1" href="#">Electronics</a>
  <ul class="dropdown-menu" id="elecItems">
    <li><a class="insideElement" tabindex="-1" href="#">Mobiles</a></li>
    <li><a  class="insideElement" href="#">Cameras</a></li>
    <li><a class="insideElement" href="#">Laptop</a></li>
    <li><a class="insideElement" href="#">Pendrives</a></li>
    <li><a class="insideElement" href="#">Televisions</a></li>
  </ul>
</li>

When I click on Mobile, I want to the text Value as Electronics from the parent tag element.

Script to get the text value of sub menu:

$('#subCategory li').on('click', function(){
   var selectedItem=$(this).text(); 
});

Similar to the above script can I get the value of parent element as Electronics

Answer 1

您可以使用$(this).closest('ul').siblings('a').text();。查看下面的更新代码段

＆＃13;

$('#subCategory li').on('click', function(){
   var selectedItem=$(this).closest('ul').siblings('a').text(); 
   console.log(selectedItem);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-submenu" id="subCategory">
  <a class="insideElement" tabindex="-1" href="#">Electronics</a>
  <ul class="dropdown-menu" id="elecItems">
    <li><a class="insideElement" tabindex="-1" href="#">Mobiles</a></li>
    <li><a  class="insideElement" href="#">Cameras</a></li>
    <li><a class="insideElement" href="#">Laptop</a></li>
    <li><a class="insideElement" href="#">Pendrives</a></li>
    <li><a class="insideElement" href="#">Televisions</a></li>
  </ul>
</li>

＆＃13;

Answer 2

$('#subCategory li').on('click', function() {
  console.log($(this).find('a').text());
  console.log($(this).parents(".dropdown-menu").siblings("a").text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-submenu" id="subCategory">
  <a class="insideElement" tabindex="-1" href="#">Electronics</a>
  <ul class="dropdown-menu" id="elecItems">
    <li><a class="insideElement" tabindex="-1" href="#">Mobiles</a></li>
    <li><a class="insideElement" href="#">Cameras</a></li>
    <li><a class="insideElement" href="#">Laptop</a></li>
    <li><a class="insideElement" href="#">Pendrives</a></li>
    <li><a class="insideElement" href="#">Televisions</a></li>
  </ul>
</li>

Answer 3

您有两个选择：

$('#subCategory li a').on('click', function(){
  var selectedItem=$(this).text(); 
});

或

$('#subCategory li').on('click', function(){
  var selectedItem=$(this).find('.insideElement').text(); 
});

Answer 4

您可以将函数附加到#subcategory内的每个li，并找到您要查找的元素。

$('#subCategory li').click(function() 
    var a = $(this).parent().prev();
    alert($(a).html()); 

});

Answer 5

尝试此操作以获取父a文字。

JAVASCRIPT -

var parentElmnt = $(this).closest('#subCategory').find('a:eq(0)').text();

Answer 6

尝试以下代码

$.(this).closest('ul').prev('a').text();

Answer 7

您可以使用解决方案https://jsfiddle.net/yuh4bq33/2/

$('#subCategory li').on('click', function(){
   console.log("Parent:" + $(this).parent().prev().text()); 
   console.log("Sub Menu:" + $(this).find('a').text()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-submenu" id="subCategory">
  <a class="insideElement" tabindex="-1" href="#">Electronics</a>
  <ul class="dropdown-menu" id="elecItems">
    <li><a class="insideElement" tabindex="-1" href="#">Mobiles</a></li>
    <li><a  class="insideElement" href="#">Cameras</a></li>
    <li><a class="insideElement" href="#">Laptop</a></li>
    <li><a class="insideElement" href="#">Pendrives</a></li>
    <li><a class="insideElement" href="#">Televisions</a></li>
  </ul>
</li>

Answer 8

您可以使用以下jquery获取类别和列表项

的文本

 $('#subCategory ul li').click(function(){
    var selectedItem=$(this).find("a").html();  // Selected list item
    var selectedItem2=$(this).closest("#subCategory").find("a").first().html();  // Electronics
    });

Answer 9

试试这个：

$('#subCategory li').on('click', function(){
   var selectedItem=$(this).text(); 
   var parent = $('#subCategory').children('a').text();
   $(this).text(parent); 
});

Answer 10

这是更新的代码。您需要使用parents()，siblings()和find()。此外，确保在执行find() else时使用类名，它会获取所有标记：

＆＃13;

$('#subCategory li').on('click', function() {
  console.log($(this).parents(".dropdown-menu").siblings("a.insideElement").text() + ' => ' + $(this).find('a.insideElement').text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-submenu" id="subCategory">
  <a class="insideElement" tabindex="-1" href="#">Electronics</a>
  <ul class="dropdown-menu" id="elecItems">
    <li><a class="insideElement" tabindex="-1" href="#">Mobiles</a></li>
    <li><a class="insideElement" href="#">Cameras</a></li>
    <li><a class="insideElement" href="#">Laptop</a></li>
    <li><a class="insideElement" href="#">Pendrives</a></li>
    <li><a class="insideElement" href="#">Televisions</a></li>
  </ul>
</li>

＆＃13;

如何获取父<a> tag element in JQuery

10 个答案: