CODEWITHSUNDEEP
javascriptjquery
Mohammed Farooq
Mohammed Farooq

Reputation: 227

find <ul> id based on text of <li>

I have li with unique text and i want to get the id on that text.

<ul id="test1">
  <li><a href="#" onclick="myfunction('users')">My Link</a></li>
 </ul>

<ul id="test2">
  <li><a href="#" onclick="myfunction('Account')">Test Link</a></li>
</ul>

I want to get the UL id, whose li anchor tag onclick function contains text is users.

Upvotes: 1

Views: 441

Answers (9)

chetan tyagi
chetan tyagi

Reputation: 1

try this this works great(use parent function)

    $(function(){
    $("ul li").find("a:contains(Link)").parent().parent().attr("id");
})

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

here it is:

$('ul a').click(function(){  // click event for anchor tag which is inside ul

if($(this).indexOf("users") == -1) // check if text contains users
{

console.log($(this).parent("ul").attr("id")); // get its parent ul id
}

})

Upvotes: 0

Adil
Adil

Reputation: 148180

Pass the current object in event handler and use to get the id of parent ul using closest(), onclick="myfunction(this,'users')"

Live Demo

HTML

<ul id="test1">
  <li><a href="#" onclick="myfunction(this,'users')">My Link</a></li>
 </ul>

<ul id="test2">
  <li><a href="#" onclick="myfunction(this,'Account')">Test Link</a></li>
</ul>

Javascript

function myfunction(obj, parm)
{
   alert($(obj).closest('ul').attr('id'));
}

Upvotes: 0

pnkz
pnkz

Reputation: 336

<script>
  function myfunction(param, event) {
    console.log(event.target.parentElement.parentElement.id);
  }
</script>

Upvotes: 0

Mark Rijsmus
Mark Rijsmus

Reputation: 627

Try this:

$(document).ready(function(){
    $('li a').on('click', function(){
        alert($(this).closest('ul').prop('id'));
    });
});

Here is my fiddle example http://jsfiddle.net/58CTf/3/

Upvotes: 0

martynas
martynas

Reputation: 12290

Try this:

$('a[onclick*="users"]').each(function() {
    console.log($(this).text());   
});

DEMO

Upvotes: 0

MrCode
MrCode

Reputation: 64536

Using the attribute contains selector:

Fiddle

var id = $('ul > li > a[onclick*="\'users\'"]').closest('ul').attr('id');

Or to include the function name as well:

var id = $('ul > li > a[onclick="myfunction(\'users\')"]').closest('ul').attr('id');

Upvotes: 1

Arko Elsenaar
Arko Elsenaar

Reputation: 1739

I wouldn't use an onclick in this case, try something like this:

<ul id="test1">
  <li><a href="#" data-value="users">My Link</a></li>
 </ul>

<ul id="test2">
  <li><a href="#" data-value="Account">Test Link</a></li>
</ul>

Then jQuery:

$("li").click(function() {
    parent = $(this).parent(); // your UL element
    value = $(this).data('value'); // your parameter, you can use it now
    // Rest of your function right here
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

You can use filter to do this:

var $usersUl = $('a').filter(function() {
    return $(this).attr('onclick').indexOf('users') != -1;
}).closest('ul');

Example fiddle

It should be noted however that having your UI rely on a parameter in a JS function call is a little unsightly, if not verging on a hack. If you can, change the HTML to include some data attributes and filter by those:

<ul id="test1">
    <li><a href="#" onclick="myfunction('users')" data-type="users">My Link</a></li>
</ul>
<ul id="test2">
    <li><a href="#" onclick="myfunction('Account')" data-type="account">Test Link</a></li>
</ul>

var $users = $('a').filter(function() {
    return $(this).data('users');
}).closest('ul');

Upvotes: 2

Related Questions