jquery - 如何返回点击的元素

我想在id="nm"内单击<ul>时使用div。
这是HTML。

<div id="suggestionTags">
   <ul>
      <li class="nm">Commonwealth</li>
      <span class="cty"> x GB</span>
      <li class="hse">Commonwealth</li>
      <li class="yrs">1649-1653</li>
   </ul>
   <ul>
      <li class="nm">Oliver Cromwell</li>
      <span class="cty"> x GB</span>
      <li class="hse">Commonwealth</li>
      <li class="yrs">1653-1658</li>
   </ul>
   <ul>
      <li class="nm">Richard Cromwell</li>
      <span class="cty"> x GB</span>
      <li class="hse">Commonwealth</li>
      <li class="yrs">1658-1659</li>
   </ul>
   <ul>
      <li class="nm">Elizabeth II ((Head of the Commonwealth of Nations))</li>
      <span class="cty"> x GB</span>
      <li class="hse">House of Windsor</li>
      <li class="yrs">1952-</li>
   </ul>
</div>

这是javascript的一部分：

$("#suggestionTags").on('click',function(){
    alert( $(this).find("li.nm").text() );
});

此代码使我无所不能，而不仅仅是点击的id =“ nm”
有人可以帮我吗？

编辑：

提议的解决方案进入http://jsfiddle.net/工作阶段。但是我仍然遇到问题。
我将发布我的代码，可能是问题所在。

    <script language="JavaScript">

     $(document).ready(function()

            {
//this is the code that does'nt work
            $('#suggestionTags ul').on('click', function() {
                alert($(this).find("li.nm").text());
            });
//end of part
                var o = [];
                $('#scrivo').keyup(function()
                {
                    if ($('#scrivo').val() <= 0) {
                        $('#suggestionTags').empty();
                        return;
                    }
                    var json = (function() {
                        var json = null;
                        $.ajax({
                            'async': false,
                            'global': false,
                            'url': "re.json",
                            'dataType': "json",
                            'success': function(data) {
                                json = data;
                            }
                        });
                        return json.Re;
                    })();
                    o = $.grep(json, function(n) {
                        return n.nm.indexOf($('#scrivo').val()) !== -1;
                    }, false);
                    $('#suggestionTags').empty();
                    var html = "";
                    $.each(o, function(index, value) {
                        html += '<ul>';
                        $.each(value, function(i, v) {
                            switch (i) {
                                case "nm":
                                    html += "<li class='nm'>" + v + "</li>";
                                    break;
                                case "cty":
                                    html += "<span class='cty'> x " + v + "</span>";
                                    break;
                                case "hse":
                                    html += "<li class='hse'>" + v + "</li>";
                                    break;
                                case "yrs":
                                    html += "<li class='yrs'>" + v + "</li>";
                                    break;
                            }
                            ;
                        });
                        html += "</ul>";


                    });
                    $('#suggestionTags').append(html);
                });

            });

        </script>

我解释一下我的代码：该代码检索一个json文件，然后<input>使用keyup功能过滤var o。过滤的对象数组显示在#suggestionTags <div>中。
json是这样的：

{
  "Re":
[
  {
    "nm": "Edward the Elder",
    "cty": "GB",
    "hse": "House of Wessex",
    "yrs": "899-925"
  },
  {
    "nm": "Edgar",
    "cty": "GB",
    "hse": "House of Wessex",
    "yrs": "959-975"
  },
  {
    "nm": "Edward the Martyr",
    "cty": "GB",
    "hse": "House of Wessex",
    "yrs": "975-978"
  }
 ]
}

我不明白为什么这段代码无法按预期工作。但是如果我更改这行代码

$('#suggestionTags ul').on('click', function() {
                alert($(this).find("li.nm").text());
            });

与
这个

$('#suggestionTags').on('click', function() {
                alert($(this).text());
            });

在警报弹出窗口中，我可以看到所有过滤的对象。但是我无法检索单击的html部分。

最佳答案

我会这样：

$("#suggestionTags li").on('click', function () {
    alert($(this).closest('ul').find("li.nm").text());
});

jsFiddle example

关于jquery - 如何返回点击的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25004231/