CODEWITHSUNDEEP
jquery
Szymon Toda
Szymon Toda

Reputation: 4516

Select value of nested element

I have nested elements:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

How to get value (it's '1') from li class="item-1">1</li> when clicked? I have problem with defining right selector... How to end with something like this:

$(all children of level-1).click(function() {
    alert($(this.item-1").val(););
}

Upvotes: 0

Views: 1499

Answers (3)

felipekm
felipekm

Reputation: 2910

I've created a fiddle with some tests, I guess this supply your need

Here is what I did:

$('.level-3').children('.item-1').css('color', 'red');​

Hope this helps.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

Try this

$(this).text() OR $(this).html()

.val() is for input fields.. So you cannot access the data you seek using .val() 

$('.level-1 li').on('click', function(e) {

    alert($(this).contents().filter(function() {
        return this.nodeType == 3
    }).text());
    e.stopPropagation();
});

Don't forget e.stoppropagation() .. Otherwise you will also see the text inside the parent li..

Try FIDDLE

Upvotes: 3

jholloman
jholloman

Reputation: 1979

$(".level-1 li").click(function() {
    console.log($(this).val());
});

Please read up on jQuery events and selectors: http://docs.jquery.com/Main_Page

Upvotes: -1

Related Questions