如何減少使用JQuery和.each（）的JavaScript代碼

Question

我試圖減少以下代碼

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變量在上一個代碼中始終未定義。

我的錯是什么？

Answer 1

在評論的幫助下，我找到了解決方案。

我必須使用get（0）來通過JQuery（）獲得列表返回器中的第一個元素。

而且我必須使用$(jqDialog)而不是jqDialog來獲取“ data-widgetvar”屬性。

這是我的新代碼

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);

Answer 2

假設您要訪問嵌套在具有css類ui-dialog和ui-overlay-visible的元素中的屬性data-widgetvar的元素，則可以使用簡單的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>

如何減少使用JQuery和.each（）的JavaScript代碼

問題描述

2 個解決方案

解決方案1
1 2018-02-23 13:06:30

解決方案2
0 2018-02-23 13:02:43

如何減少使用JQuery和.each（）的JavaScript代碼

問題描述

2 個解決方案

解決方案1 1 2018-02-23 13:06:30

解決方案2 0 2018-02-23 13:02:43

解決方案1
1 2018-02-23 13:06:30

解決方案2
0 2018-02-23 13:02:43