jQuery getJSON : getting clicked 'this' from several levels down

Question

摘要:尝试从多次调用中引用点击“this”。

大家好，

我遇到的情况是，我有一组无序列表形式的按钮(按钮 1 - 6)。单击其中一个按钮时，我希望 getJSON 在单击的按钮下方加载更多

选项(基于 json 数据)。现在，当我单击其中一个按钮时，它会在所有按钮下加载基于 JSON 的选项。问题是我不确定如何引用“click”函数调用的“this”而不是与嵌套调用之一关联的“this”。

对于 jQuery，我是个大佬，所以我意识到这可能是一个简单的解决方案。如果我的术语有点不对劲，请原谅我。

感谢您阅读并考虑我的问题。

这是相关的 javascript:

$(".block-buttons .level1 a.level1_a").click(function () 
{
  $.getJSON('api/1/test.json', 
    function(data) {    
        ul = $('<ul>');
        $.each(data.items,
        function( intIndex, objValue )
        {
            a = $("<a/>").text(objValue.name);
            li = $('<li>').attr("class",'level2').append(a);
            ul.append(li);
        });
        /* Here is where the problem lies.  I'd like to append the 
           new JSON-loaded data to the ".level1" element that was clicked
           and not to all of the ".level1" elements.  I need to figure out how 
           to replace the ".level1" below with some reference to the "this"
           from the clicked element.  
        */
        $(".level1").append(ul);            
      });   
  }
  return false; 
});

以下是相关的 HTML:

<div class="block-center block-buttons">
<ul>
<li class="top"><a class="top_a" href="">Make a Selection</a>
    <ul>
    <li class="level1"><a class="level1_a" id="button_1" href="">Button 1</a></li>
    <li class="level1"><a class="level1_a" id="button_2" href="">Button 2</a></li>
    <li class="level1"><a class="level1_a" id="button_3" href="">Button 3</a></li>
    <li class="level1"><a class="level1_a" id="button_4" href="">Button 4</a></li>
    <li class="level1"><a class="level1_a" id="button_5" href="">Button 5</a></li>
    <li class="level1"><a class="level1_a" id="button_6" href="">Button 6</a></li>
    </ul>
</li>
</ul>
</div>

Answer 1

将列表项分配给变量，例如

$(".block-buttons .level1 a.level1_a").click(function () 
{
    var listItem = $(this).parent('li');
    $.getJSON('api/1/test.json', //etc