Question

如何使用此代码获取所选项目的li-item？

现在它循环遍历ul中的所有类，而不仅仅是选中的。

$('<div id="chooseCustomFields'
  + field_id
  + '" class="wrapper-customfields" tabindex="1"><span>Choose Type</span>'
  + '<ul id="chooseCustomField'
  + field_id
  + '" class="dropdown">'
  + '<li class="chooseCheckbox"><i class="fa-icon-check"></i>Checkbox</li>'
  + '<li class="chooseAlternatives"><i class="fa-icon-list-ul"></i> Alternatives</li>'
  + '<li class="chooseDropdown"><i class="fa-icon-list-alt"></i> Dropdown</li>'
  + '<li class="chooseTextField"><i class="fa-icon-font"></i> Text</li>'
  + '</ul></div>').appendTo(field_secondchild).addClass("metro three-d")
.click(function() {
$('#chooseCustomField' + field_id + ' li').each(function() {
    alert($(this).attr('class'))
});
});

Answer 1

您希望点击li

$('<div id="chooseCustomFields'
  + field_id
  + '" class="wrapper-customfields" tabindex="1"><span>Choose Type</span>'
  + '<ul id="chooseCustomField'
  + field_id
  + '" class="dropdown">'
  + '<li class="chooseCheckbox"><i class="fa-icon-check"></i>Checkbox</li>'
  + '<li class="chooseAlternatives"><i class="fa-icon-list-ul"></i> Alternatives</li>'
  + '<li class="chooseDropdown"><i class="fa-icon-list-alt"></i> Dropdown</li>'
  + '<li class="chooseTextField"><i class="fa-icon-font"></i> Text</li>'
  + '</ul></div>').appendTo(field_secondchild).addClass("metro three-d")
.on('click', 'li', function() {
    alert($(this).attr('class'))
});

Answer 2

你的html格式不正确，所以我修复了，然后我将html和js分开，这样我们就可以看到这实际上有效了。

这是工作小提琴：
http://jsfiddle.net/acturbo/LmXz4/1/

的javascript：

var field_id = "#chooseCustomField" + "555";
var field_secondchild = "#secondchild";

// new logic
$(field_id).appendTo( field_secondchild ).addClass( "metro three-d");

// easier way to assign a click event to each li
$(field_id + ' li').on("click", function() {
    alert($(this).attr('class'))
});

html（需要测试）

<div id="secondchild">
    <p>for testing only</p>
</div>
<div>
    <p>should be last</p>
</div>

<div id="chooseCustomFields555" class="wrapper-customfields" tabindex="1">
  <span>Choose Type</span>
  <ul id="chooseCustomField555" class="dropdown">
    <li class="chooseCheckbox"><i class="fa-icon-check"></i>Checkbox</li>
    <li class="chooseAlternatives"><i class="fa-icon-list-ul"></i> Alternatives</li>
    <li class="chooseDropdown"><i class="fa-icon-list-alt"></i> Dropdown</li>
    <li class="chooseTextField"><i class="fa-icon-font"></i> Text</li>
    </ul>
</div>

获取“ul”中的选定课程

2 个答案: