CODEWITHSUNDEEP
jquery
Alex Stevensonn
Alex Stevensonn

Reputation: 21

Get UL attribute clicking on a LI item

i have a problem with jquery :)

I want, after clicking on a li item, to get the question attribute of the ul where the li is contained.

I created a fiddle: https://jsfiddle.net/ez88dcn8/

Jquery Markup:

$(document).on('click','.js_test', function() {
    var selectedTool = $(this).attr("tool");
    var selectedType = $(this).attr("type");
    alert("selectedTool-> " + selectedTool + " selectedType-> " + selectedType);
});

how can i get the attribute i want of ul ?

Thanks

Upvotes: 0

Views: 731

Answers (4)

connexo
connexo

Reputation: 56813

var selectedQuestion = $(this).closest("ul").attr("question");

jQuery documentation for .closest():

https://api.jquery.com/closest/

Please note that you are using invalid HTML attributes. You can make them valid by prefixing their names with data-.

https://jsfiddle.net/ez88dcn8/3/

Please also note that you are putting your click event handler on the anchors, not on the list items. This is why clicking on the li rather than on the a.js_test returns undefined (because the li does not have the attributes you want to read).

You can fix this by either putting the click handler on the list items instead of the anchors (and then adjust the selectors for the attributes accordingly var selectedType = $(this).find('a.js_test').attr("type");) or by making the anchors display: block; so they grab the full li space (which is what I did in the fiddle).

Upvotes: 1

Olaf Erlandsen
Olaf Erlandsen

Reputation: 6036

You can use closest, parent and parents methods. Personally I prefer to use parent and parents depending on the case.

try with:

All <ul> parents:

$('li').click(function() {
    var ul = $(this).parents('ul');
    console.log(ul.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click element</h3>
<ul id="all">
  <li>
    English
    <ul id="english">
      <li>Hi</li>
      <li>Hello</li>
    </ul>
  </li>
  <li>
    Español
    <ul id="spanish">
      <li>Hola</li>
    </ul>
  </li>
</ul>

First <ul> parent:

$('ul li ul li').on('click', function() {
    var ul = $(this).parent('ul');
    console.log(ul.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click sub-element</h3>

<ul id="all">
    <li>
      English
      <ul id="english">
        <li>Hi</li>
        <li>Hello</li>
      </ul>
  </li>
  <li>
    Español
    <ul id="spanish">
      <li>Hola</li>
    </ul>
  </li>
</ul>

And if you want get some attribute, you can use data or attr like:

$('ul li ul li').on('click', function() {
    var ul = $(this).parent('ul');
    console.log('Attribute data-question:', ul.data('question'));
    console.log('Attribute question:', ul.attr('question'));
    console.log('Attribute id:', ul.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click sub-element</h3>

    <ul id="all">
        <li>
          English
          <ul id="english" data-question="1" question="2">
            <li>Hi</li>
            <li>Hello</li>
          </ul>
      </li>
      <li>
        Español
        <ul id="spanish" data-question="3" question="4">
          <li>Hola</li>
        </ul>
      </li>
    </ul>

Learn more here:

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15403

Using .closest() method to get the question attr in the UL

 $(document).on('click','.js_test, li', function(event) {
        event.stopPropagation();
        alert($(this).closest('ul').attr('question'));
  });

or another way use .parent() method in jquery

$(this).parent().parent().attr('question')

https://jsfiddle.net/ez88dcn8/5/

Upvotes: 1

ScanQR
ScanQR

Reputation: 3820

Try this,

You need to find the parent using closest() and get the question attribute as follows,

    $(document).on('click', '.js_test', function() {

      var selectedTool = $(this).attr("tool");
      var selectedType = $(this).attr("type");


      alert($(this).closest('ul').attr("question"));


    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12 tools-5" style="">
  <div class="form-group">
    <div class="dropdown open">
      <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Test 222</button>

      <ul class="dropdown-menu" aria-labelledby="dropdownMenu" question="5">

        <li><a class="js_test" value="shortlink" tool="ss" type="0">ita</a>
        </li>
        <li><a class="js_test" value="shortlink" tool="ss" type="3">ger</a>
        </li>

      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions