如何减少使用JQuery和.each（）的javascript代码_Javascript_Jquery_Each_Selector

如何减少使用JQuery和.each（）的javascript代码

javascript jquery

如何减少使用JQuery和.each（）的javascript代码,javascript,jquery,each,selector,Javascript,Jquery,Each,Selector,我试图减少以下代码 var wgDialog = jQuery(".ui-dialog.ui-overlay-visible",window.parent.document) .each (function(nIndex) { var sWidgetName = $(this).attr('data-widgetvar'); var wgDialog

我试图减少以下代码

var wgDialog 
    = jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
        .each
            (function(nIndex)
                {
                var sWidgetName = $(this).attr('data-widgetvar');
                var wgDialog = window.parent.PF(sWidgetName);
                });

遵守这一准则

var jqDialog 
    = jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
        .children(":first-child");

var sWidgetName = jqDialog.attr('data-widgetvar');
var wgDialog = window.parent.PF(sWidgetName);

但这不管用

sWidgetName变量在最后一段代码中始终未定义

我的错误是什么？

假设要访问属性数据为widgetvar的元素，该元素嵌套在css类ui对话框和ui覆盖可见的元素中，则可以使用纯javascript执行以下操作：

var myElement = document.querySelector('.ui-dialog.ui-overlay-visible [data-widgetvar]');

querySelector允许类似CSS的选择器将类与属性选择器组合在一起

更新：

以下是一个工作示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <script type="text/javascript">
        function main() {
            var myElement = document.querySelector('.ui-dialog.ui-overlay-visible [data-widgetvar]');
            console.log("Attribute value", myElement.getAttribute('data-widgetvar'));
        }

        document.addEventListener("DOMContentLoaded", main);        
    </script>
</head>

<body>
    <div class="ui-dialog ui-overlay-visible">
        <div>some element</div>
        <div data-widgetvar="someValue">some text content</div>
    </div>
</body>

</html>

在评论的帮助下，我找到了一个解决方案

我必须使用get0通过JQuery获取列表返回器中的第一个元素

我必须使用$jqDialog而不是jqDialog来获取'datawidgetvar'属性

这是我的新代码

var jqDialog 
    = jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
        .get(0);

var sWidgetName = $(jqDialog).attr('data-widgetvar');
var wgDialog = window.parent.PF(sWidgetName);

您的第二个添加了.children，因此第一个循环遍历所有的.ui对话框元素，而第二个则获取每个对话框的第一个子元素。然后.attr从这些元素的第一个元素中提取。需要知道html才能回答这个问题。但是element.ui-dialog.ui-overlay-visible的第一个子元素没有名为data widgetvar的属性。您可以尝试添加第一个子元素的元素名，这是您的一个选项。childrendiv：第一个孩子；例如，第一个和第二个代码执行完全不同的操作。第一个元素遍历所有.ui对话框元素，其中第二个元素只获取第一个.ui对话框元素的第一个子元素的属性“data widgetvar”。您希望在第一段代码中减少什么？我尝试了您的解决方案，用jqDialog替换myElement，但这不起作用。我尝试了一些小改变，但没有成功。我已经有了一个解决方案，但我有兴趣验证你的。你能告诉我如何分配jqDialog行吗？