form的jquery对象调用find方法找不到任何子元素

Posted 2023-05-08

现状：在一div中有一form标签。div使用easyui的window组件显示弹出窗。使用jQuery能查找到该form标签，使用该form的jQuery对象找不到任何子元素。经测试，谷歌浏览器、火狐浏览器均无法查找，但通过form标签下的其他元素的jQuery可以查找到子元素.
注：为兼容easyui组件的使用，必须解决find方法的问题

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。语法：.find(selector) 参数selector 字符串值，包含供匹配当前元素集合的选择器表达式。 详细说明：如果给定一个表示 DOM 元素集合的 jQuery 对象，.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。.find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。 参考技术A 写法上是没错的，但是不建议这么写;
$(dcument).ready(function()
$("#menu
ul
li").toggle(function()
$(this).find('.menu_son').show();//点击一次显示
,function()
$(this).find('.menu_son').hide();//点击一次隐藏
)
);

JQuery 创建新的选择选项

【中文标题】JQuery 创建新的选择选项

【英文标题】：JQuery create new select option

【发布时间】：2011-02-15 14:11:42

【问题描述】：

我在创建选择选项的常规 JavaScript 中有以下函数。有没有一种方法可以用 jQuery 做到这一点而不必使用表单对象？也许将选项存储为 JSON 对象数组并在调用函数中解析它...

function populate(form)

form.options.length = 0;
form.options[0] = new Option("Select a city / town in Sweden","");
form.options[1] = new Option("Melbourne","Melbourne");

下面是我如何调用上面的函数：

populate(document.form.county); //county is the id of the dropdownlist to populate.    

【问题讨论】：

可能重复，***.com/q/740195/425313

【参考方案1】：

一个非常简单的方法来做到这一点......

// create the option
var opt = $("<option>").val("myvalue").text("my text");

//append option to the select element
$(#my-select).append(opt);

这可以通过多种方式完成，如果你真的想的话，甚至可以在一行中完成。

【参考方案2】：

如果你需要制作单个元素，你可以使用这个结构：

$('<option/>', 
    'class': this.dataID,
    'text': this.s_dataValue
).appendTo('.subCategory');

但是如果你需要打印很多元素，你可以使用这个结构：

function printOptions(arr)
    jQuery.each(arr, function()
        $('<option/>', 
            'value': this.dataID,
            'text': this.s_dataValue
        ).appendTo('.subCategory');
    );

【参考方案3】：

怎么样

var option = $('<option/>');
option.attr( 'value': 'myValue' ).text('myText');
$('#county').append(option);

【讨论】：

使用 jQuery 1.4+，你可以这样做：$('<option/>', value : 'myValue' ).text('myText').appendTo('#country');

建立选项列表，然后将它们附加到 DOM 会稍微高效一些，因此您不会每次都导致回流。见developers.google.com/speed/articles/reflow和***.com/questions/510213/…

非常优雅的方式！不错。

【参考方案4】：

这令人困惑。当您说“表单对象”时，您的意思是“<select>元素”吗？如果不是，您的代码将不起作用，因此我假设您的 form 变量实际上是对 <select> 元素的引用。为什么要重写这段代码？自 1996 年左右以来，您一直在所有可编写脚本的浏览器中工作，并且不会很快停止工作。使用 jQuery 会立即使您的代码变慢、更容易出错并且跨浏览器的兼容性降低。

这是一个函数，它使用您当前的代码作为起点，并从对象中填充 <select> 元素：

<select id="mySelect"></select>

<script type="text/javascript>

function populateSelect(select, optionsData) 
    var options = select.options, o, selected;
    options.length = 0;
    for (var i = 0, len = optionsData.length; i < len; ++i) 
        o = optionsData[i];
        selected = !!o.selected;
        options[i] = new Option(o.text, o.value, selected, selected);
    


var optionsData = [
    
        text: "Select a city / town in Sweden",
        value: ""
    ,
    
        text: "Melbourne",
        value: "Melbourne",
        selected: true
    
];

populateSelect(document.getElementById("mySelect"), optionsData);

</script>

【参考方案5】：

怎么样

$('#county').append(
    $('<option />')
        .text('Select a city / town in Sweden')
        .val(''),
    $('<option />')
        .text('Melbourne')
        .val('Melbourne')
);

【参考方案6】：

类似：

function populate(selector) 
  $(selector)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')


populate('#myform .myselect');

甚至：

$.fn.populate = function() 
  $(this)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')


$('#myform .myselect').populate();