Using jquery how can i get parent LI where the LI's text matches my button text?

Question

When I click the button I want to grab the li from the list and then trigger an event as if I had clicked on the li itself. In other words, I'm trying fire a click event on the menu from the button.

The code I have below returns the document object and not the parent LI.

pen here : https://codepen.io/GerdSuhr/pen/WKZLYQ?editors=1011

$('#switch button').on('click', function(){
  var text  = $(this).text();
  var myLI = $('dl-menu li a span:contains(text)').parent().parent();
  console.log(myLI);
  //$(myLI).trigger('click.dl-menu');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="dl-menu">
<li><a href=""><span>aero</span></a></li>
<li><a href=""><span>bio</span></a></li>
<li><a href=""><span>lab</span></a></li>
</ul>

<br>
<br>
<br>

<div id="switch">
  <button>bio</button>
</div>

score 1 · Answer 1 · answered Jul 27 '18 at 19:13

1

Your logic is almost there, you just need to concatenate the value of the text variable in to the selector, and then raise the click event:

$('#switch button').on('click', function() {
  var text = $(this).text();
  var $myLI = $(`.dl-menu li a span:contains(${text})`).closest('li');
  $myLI.click();  
});

$('li').click(function() {
  console.log(`You clicked the ${$(this).text()} <li> element`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="dl-menu">
  <li><a href=""><span>aero</span></a></li>
  <li><a href=""><span>bio</span></a></li>
  <li><a href=""><span>lab</span></a></li>
</ul>

<br /><br /><br />

<div id="switch">
  <button>bio</button>
</div>

Also note the preferred use of closest() over chained parent() calls

answered Jul 27 '18 at 19:13

Rory McCrossan

331,213
40
305
339

Thanks Rory, but not really what i was trying to accomplish i don't think – Gerd Jul 27 '18 at 19:27
If you let me know how, I can help – Rory McCrossan Jul 27 '18 at 19:27
Thanks Rory, but not really what i was trying to accomplish i don't think. I'm a bit confused by what you mean by concatenate the value of text? Are you referring to the expression binding ${text}? Also I need to trigger an already existing custom click event. – Gerd Jul 27 '18 at 19:34
`Are you referring to the expression binding ${text}` that's correct. Your code was originally looking *literally* for the word `text`, not the value contained within `text`. How is that custom click event defined? In theory all you need to do then is change `click()` to `trigger('your-custom-event-name-here')` – Rory McCrossan Jul 27 '18 at 19:35
Ok thanks, let me try triggering this. I was thinking that if i console.log($myLI) i would get
bio

Gerd

Jul 27 '18 at 19:47

`$myLI` is a jQuery object that holds that element, so that's what you have. Unless you mean that you want the outerHTML of the element, which is a **very** weird thing to need, but you could get it by using this technique: https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html – Rory McCrossan Jul 27 '18 at 19:50

What is the non es6 syntax for this? var $myLI = $(`.dl-menu li a span:contains(${text})`).closest('li'); – Gerd Jul 27 '18 at 21:27

`var $myLI = $('.dl-menu li a span:contains(' + text + ')').closest('li');` – Rory McCrossan Jul 27 '18 at 21:27

And for the console.log: `console.log('You clicked the ' + $(this).text() + '

element');`

– Rory McCrossan Jul 27 '18 at 21:28

score 0 · Accepted Answer · answered Jul 30 '18 at 15:30

        $('#switch button').on('click', function (event) {
            var text = $(this).text().trim();
            var $industry = $('ul.menu li[data-industry="'+text+'"]');
            $($industry).trigger('click.menu');
        });

        this.$menuitems.on('click.menu', function(){
         // slide menu code
        }



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="menu">
 <li data-industry="aero"><a href=""><span>aero</span></a></li>
 <li data-industry="bio"><a href=""><span>bio</span></a></li>
 <li data-industry="lab"><a href=""><span>lab</span></a></li>
</ul>

<br /><br /><br />

<div id="switch">
  <button>bio</button>
  <button>lab</button>
  <button>aero</button>
</div>

Using jquery how can i get parent LI where the LI's text matches my button text?

2 Answers2