jquery 查找 div 或按名称选择返回 0 个结果答案

【问题标题】：jquery find div or select by name returning 0 resultsjquery 查找 div 或按名称选择返回 0 个结果
【发布时间】：2011-09-08 05:28:26
【问题描述】：

我正在尝试按名称在 <p> 内选择 <div>，但它返回 0 个结果。相同类型的选择适用于<input> 和<span>，但不适用于<select> 和<div>。下面的代码演示了我的意思：

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
</head>
<body>
    <p id="foo">
        <input type="text" name="tl-label" />
        <select name="tl_type">
            <option value="select_type">Select type</option>
            <option value="field">Field</option>
            <option value="text">Text label</option>
            <option value="flag_set">Flag set</option>
        </select>
        <span name="manip-links">
            <a name="move_up" href="#">[move up]</a>
            <a name="move_down" href="#">[move down]</a>
            <a name="delete" href="#">[delete]</a>
        </span>
        <div name="field-params">
            field params
        </div>
        <div name="text-params">
            text params
        </div>
        <div name="flag-set-params">
            flag set params
        </div>
    </p>
</body>
<script type="text/javascript" language="JavaScript">
<!--
    var foo = $('#foo');
    foo.tl_label = foo.find('input[name=tl-label]');
    foo.tl_type = foo.find('select[name=tl-type]');
    foo.manip_links = foo.find('span[name=manip-links]');
    foo.field_params = foo.find('div[name=field-params]');
    foo.text_params = foo.find('div[name=text-params]');
    foo.flag_set_params = foo.find('div[name=flag-set-params]');

    $('body').append('<p>' +
        'tl_label: ' + foo.tl_label.size() + '<br/>' +
        'tl_type: ' + foo.tl_type.size() + '<br/>' +
        'manip_links: ' + foo.manip_links.size() + '<br/>' +
        'field_params: ' + foo.field_params.size() + '<br/>' +
        'text_params: ' + foo.text_params.size() + '<br/>' +
        'flag_set_params: ' + foo.flag_set_params.size() + '<br/>' +
        '</p>');
//-->
</script>
</html>

在底部附加的痕迹读取（在 Firefox 3.5.6 中）：

tl_label: 1
tl_type: 0
manip_links: 1
字段参数：0
文本参数：0
flag_set_params: 0

他们都应该读 1. 我错过了什么？

【问题讨论】：

您可能应该选择破折号 (-) 或下划线 (_) 作为单词分隔符，因为同时使用两者似乎会让您感到困惑。

标签： javascript jquery html jquery-selectors

【解决方案1】：

名称中的代码中包含破折号而不是下划线。（或者“选择”元素名称中的下划线而不是破折号；一个或另一个:-)

另外，我不认为 div 元素不能有 name 属性。使用“id”并使用“#whatever”进行选择。

【讨论】：

我不相信我在逻辑级别上混淆了破折号和下划线。我的问题是在不能使用的地方使用了 name 属性。我的目标是动态生成 HTML 元素，我找到了一种相当有趣的方法：在 HTML 中使用隐藏模板，为每个实例复制它，然后提取/删除 ID 并将它们用作引用实例元素的键。跨度>
在您发布的示例代码中，select 元素具有“tl_type”的“name”属性，但在您的代码中，您在该调用中查找“select[name=tl-type]”去“寻找”。第一个下划线，第二个破折号。