Erhalten UL-Attribut auf einem LI Element klicken

Question

Ich habe ein Problem mit jQuery :)

Ich möchte, nachdem auf einem li Element klicken das question Attribut des ul zu erhalten, wo die li enthalten ist.

habe ich eine Geige: 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); 
}); 

, wie ich das Attribut bekommen kann ich von ul wollen?

Dank

Answer 1

Mit .closest() Methode die Frage attr in der UL

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

oder eine andere Art und Weise Gebrauch .parent() -Methode in jquery

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

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

Answer 2

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

erhalten

jQuery Dokumentation für .closest():

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

Bitte beachten Sie, dass Sie ungültige HTML-Attribute verwenden. Sie können sie gültig machen, indem Sie ihren Namen data- voranstellen.

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

Bitte beachten Sie auch, dass Sie Ihre Click-Ereignishandler auf den Anker setzen, nicht auf die Listenelemente. Deshalb gibt li anstatt a.js_testundefined zurück (weil die li nicht die Attribute haben, die Sie lesen möchten).

Sie dies, indem entweder reparieren kann die Click-Handler auf den Listenelementen anstelle des Ankers setzen (und dann die Wähler für die Attribute entsprechend anpassen var selectedType = $(this).find('a.js_test').attr("type");) oder durch die Anker machen display: block;, so dass sie den vollen li Raum greifen (was was ich in der Geige gemacht habe).

Answer 3

Try this,

Sie müssen die parent mit closest() und erhalten das question Attribut finden, wie folgt,

$(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

Sie closest verwenden können, parent und parents Methoden. Persönlich bevorzuge ich je nach Fall parent und parents.

versuchen mit:

Alle <ul> Eltern:

$('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>

Erste <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>

Und wenn Sie etwas Attribut erhalten möchten, können Sie data oder attr wie verwenden:

$('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>

Erfahren Sie hier mehr:

• parent()
• parents()
• closests()