Question

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

Answer 1

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/

Answer 2

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).

Answer 3

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>

Answer 4

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:

Get UL attribute clicking on a LI item

4 个答案: