堆棧內存溢出
  簡體   English   中英

循環遍歷jquery中的每個div

[英]Loop through each div in jquery

 原文  2015-09-01 07:36:28  3   1    javascript/ jquery/ dom-traversal

問題描述

我有以下代碼可以檢索下面的元素。

 var alldivs = $("[class*=Chartara]");

[1]

  <div id="Chart1" class="e-datavisualization-chart e-js Chartara-BarChart" tabindex="">
   <div id="chartContainer_Chart1" style="position: relative;">
      <div id="legend_Chart1" style="position: absolute; left: 237px; top: 354px; width: 143px; height: 37px; border: 1px solid transparent;">
         <svg id="legend_Chart1_svg" class="e-designerhide" style="height: 37px; width: 143px;">
            <g id="Chart1_svg_Legend">
               <g id="Chart1_svg_Legend0" cursor="pointer">
                  <path id="Chart1_svg_LegendItemShape0" fill="Red" stroke-width="1" stroke="transparent" opacity="1" lgndctx="true" d="M 10 10 L 20 10 L 20 20 L 10 20 L 10 10 z"></path>
                  <text id="Chart1_svg_LegendItemText0" x="25" y="19.25" fill="#282828" font-size="12px" font-style="Normal" font-family="Segoe UI" font-weight="Regular" text-anchor="start" lgndctx="true">Occupancy Scheme</text>
               </g>
            </g>
         </svg>
      </div>
   </div>
   <svg id="Chart1_svg" style="width: 559px; height: 406px;">
      <rect id="Chart1_svg_SvgRect" x="0" y="0" width="559" height="406" fill="transparent" opacity="0.3" stroke-width="0" stroke="transparent"></rect>
      <rect id="Chart1_svg_ChartArea" x="78" y="58" width="461" height="266" fill="transparent" stroke-width="0.5" opacity="0.3" stroke="Gray"></rect>
      <g id="Chart1_svg_ChartTitle">
         <text id="Chart1_svg_ChartTitle" x="222.5" y="39" fill="#565656" font-size="20px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="start">Occupancy Scheme</text>
      </g>
      <g id="Chart1_svg_YAxis">
         <g id="Chart1_svg_YAxisGrid_0">
            <line id="Chart1_svgPrimaryAxis_YAxisLine_0" x1="78.5" y1="58.5" x2="78.5" y2="324.5" stroke-width="1" stroke-dasharray="" stroke="#8E8E8E"></line>
            <path id="Chart1_svg_YAxisMajorTicks_0" fill="none" stroke-width="1" stroke="#8E8E8E" d="M 72.5 324.5 L 78.5 324.5 M 72.5 191.5 L 78.5 191.5 M 72.5 58.5 L 78.5 58.5 "></path>
            <path id="Chart1_svg_YAxisMajorGridLines_0" fill="none" stroke-width="1" opacity="1" stroke-dasharray="" stroke="#DFDFDF" d="M 78.5 191.5 L 539.5 191.5 "></path>
         </g>
         <g id="Chart1_svg_YAxisLabels_0" cursor="default">
            <text id="Chart1_svg_PrimaryAxis_YLabel_0" x="67.5" y="262.25" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">ATC</text>
            <text id="Chart1_svg_PrimaryAxis_YLabel_1" x="67.5" y="129.25" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">RMS IND</text>
         </g>
      </g>
      <g id="Chart1_svg_XAxis">
         <g id="Chart1_svg_XAxisGrid_1">
            <line id="Chart1_svg_XAxisLine_1" x1="78.5" y1="324.5" x2="539.5" y2="324.5" stroke-dasharray="" stroke-width="1" stroke="#8E8E8E"></line>
            <path id="Chart1_svg_XAxisMajorTicks_1" fill="none" stroke-width="1" stroke="#8E8E8E" d="M 78.5 329.5 L 78.5 324.5 M 171.5 329.5 L 171.5 324.5 M 263.5 329.5 L 263.5 324.5 M 355.5 329.5 L 355.5 324.5 M 447.5 329.5 L 447.5 324.5 M 539.5 329.5 L 539.5 324.5 "></path>
            <path id="Chart1_svg_XAxisMajorGridLines_1" fill="none" stroke-width="1" stroke="#DFDFDF" opacity="1" stroke-dasharray="" d="M 171.5 324.5 L 171.5 58.5 M 263.5 324.5 L 263.5 58.5 M 355.5 324.5 L 355.5 58.5 M 447.5 324.5 L 447.5 58.5 "></path>
         </g>
         <g id="Chart1_svg_XAxisLabels_1" cursor="default">
            <text id="Chart1_svg_SecondaryAxis_XLabel_0" x="74.5" y="344" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">0</text>
            <text id="Chart1_svg_SecondaryAxis_XLabel_1" x="135" y="344" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">1000000000</text>
            <text id="Chart1_svg_SecondaryAxis_XLabel_2" x="227" y="344" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">2000000000</text>
            <text id="Chart1_svg_SecondaryAxis_XLabel_3" x="319" y="344" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">3000000000</text>
            <text id="Chart1_svg_SecondaryAxis_XLabel_4" x="411" y="344" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">4000000000</text>
            <text id="Chart1_svg_SecondaryAxis_XLabel_5" x="504" y="344" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">5000000000</text>
         </g>
      </g>
      <defs>
         <clipPath id="Chart1_svg_ChartAreaClipRect">
            <rect id="Chart1_svg_ChartAreaClipRect" x="78" y="58" width="461" height="266" fill="white" stroke-width="1" stroke="Gray"></rect>
         </clipPath>
      </defs>
      <g id="Chart1_svg_SeriesCollection" clip-path="url(#Chart1_svg_ChartAreaClipRect)">
         <g id="Chart1_svg_SeriesGroup_0" transform="translate(78,58)" clip-path="url(#Chart1_svg_SeriesGroup_0_ClipRect)">
            <rect id="Chart1_svg_Series0_Point0" x="0" y="152.95" width="365.48657048082464" height="93.10000000000002" fill="Red" stroke-width="1" plot="positive" opacity="1" stroke="transparent"></rect>
            <rect id="Chart1_svg_Series0_Point1" x="0" y="19.94999999999999" width="164.9632198223624" height="93.10000000000002" fill="Red" stroke-width="1" plot="positive" opacity="1" stroke="transparent"></rect>
            <defs>
               <clipPath id="Chart1_svg_SeriesGroup_0_ClipRect">
                  <rect id="Chart1_svg_SeriesGroup_0_ClipRect" x="0" y="0" width="461" height="266" fill="white" stroke-width="1" stroke="transparent"></rect>
               </clipPath>
            </defs>
         </g>
         <g id="Chart1_svg_symbolGroup_0" transform="translate(78,58)" visibility="visible"></g>
         <g id="Chart1_svg_TextGroup_0" transform="translate(78,58)" visibility="visible"></g>
      </g>
   </svg>
</div>

[2]

    <div id="Chart2" class="e-datavisualization-chart e-js Chartara-AreaChart" tabindex="">
   <div id="chartContainer_Chart2" style="position: relative;">
      <div id="legend_Chart2" style="position: absolute; left: 280.5px; top: 304px; width: 93px; height: 37px; border: 1px solid transparent;">
         <svg id="legend_Chart2_svg" class="e-designerhide" style="height: 37px; width: 93px;">
            <g id="Chart2_svg_Legend">
               <g id="Chart2_svg_Legend0" cursor="pointer">
                  <path id="Chart2_svg_LegendItemShape0" fill="#800000" stroke-width="1" stroke="transparent" opacity="1" lgndctx="true" d="M 10 10 L 20 10 L 20 20 L 10 20 L 10 10 z"></path>
                  <text id="Chart2_svg_LegendItemText0" x="25" y="19.25" fill="#282828" font-size="12px" font-style="Normal" font-family="Segoe UI" font-weight="Regular" text-anchor="start" lgndctx="true">series0</text>
               </g>
            </g>
         </svg>
      </div>
   </div>
   <svg id="Chart2_svg" style="width: 578px; height: 356px; -webkit-user-select: none;">
      <rect id="Chart2_svg_SvgRect" x="0" y="0" width="578" height="356" fill="blue" opacity="0.3" stroke-width="0" stroke="transparent"></rect>
      <rect id="Chart2_svg_ChartArea" x="96" y="20" width="462" height="254" fill="transparent" stroke-width="0.5" opacity="0.3" stroke="transparent"></rect>
      <g id="Chart2_svg_XAxis">
         <g id="Chart2_svg_XAxisGrid_0">
            <line id="Chart2_svg_XAxisLine_0" x1="96.5" y1="274.5" x2="558.5" y2="274.5" stroke-dasharray="" stroke-width="1" stroke="#8E8E8E"></line>
         </g>
         <g id="Chart2_svg_XAxisLabels_0" cursor="default">
            <text id="Chart2_svg_PrimaryAxis_XLabel_0" x="98" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Pr... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_1" x="123" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Fo... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_2" x="149.5" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">W... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_3" x="174" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Pe... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_4" x="200" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Te... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_5" x="225.5" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Re... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_6" x="250" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Ge... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_7" x="276" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Ge... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_8" x="303" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">En... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_9" x="328" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Fo... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_10" x="353" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Ag... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_11" x="380" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Pa... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_12" x="408" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Air</text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_13" x="430.5" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Re... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_14" x="457" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Pe... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_15" x="481" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Da... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_16" x="508.5" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">W... </text>
            <text id="Chart2_svg_PrimaryAxis_XLabel_17" x="536" y="294" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1">Li... </text>
         </g>
      </g>
      <g id="Chart2_svg_YAxis">
         <g id="Chart2_svg_YAxisGrid_1">
            <line id="Chart2_svgSecondaryAxis_YAxisLine_1" x1="96.5" y1="20.5" x2="96.5" y2="274.5" stroke-width="1" stroke-dasharray="" stroke="#8E8E8E"></line>
            <path id="Chart2_svg_YAxisMajorTicks_1" fill="none" stroke-width="1" stroke="#8E8E8E" d="M 90.5 274.5 L 96.5 274.5 M 90.5 231.5 L 96.5 231.5 M 90.5 189.5 L 96.5 189.5 M 90.5 147.5 L 96.5 147.5 M 90.5 104.5 L 96.5 104.5 M 90.5 62.5 L 96.5 62.5 M 90.5 20.5 L 96.5 20.5 "></path>
            <path id="Chart2_svg_YAxisMajorGridLines_1" fill="none" stroke-width="1" opacity="1" stroke-dasharray="" stroke="#DFDFDF" d="M 96.5 231.5 L 558.5 231.5 M 96.5 189.5 L 558.5 189.5 M 96.5 147.5 L 558.5 147.5 M 96.5 104.5 L 558.5 104.5 M 96.5 62.5 L 558.5 62.5 M 96.5 20.5 L 558.5 20.5 "></path>
         </g>
         <g id="Chart2_svg_YAxisLabels_1" cursor="default">
            <text id="Chart2_svg_SecondaryAxis_YLabel_0" x="85.5" y="278.75" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">0</text>
            <text id="Chart2_svg_SecondaryAxis_YLabel_1" x="85.5" y="236.41666666666669" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">1000000000</text>
            <text id="Chart2_svg_SecondaryAxis_YLabel_2" x="85.5" y="194.08333333333334" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">2000000000</text>
            <text id="Chart2_svg_SecondaryAxis_YLabel_3" x="85.5" y="151.75" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">3000000000</text>
            <text id="Chart2_svg_SecondaryAxis_YLabel_4" x="85.5" y="109.41666666666669" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">4000000000</text>
            <text id="Chart2_svg_SecondaryAxis_YLabel_5" x="85.5" y="67.08333333333331" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">5000000000</text>
            <text id="Chart2_svg_SecondaryAxis_YLabel_6" x="85.5" y="24.75" fill="#282828" font-size="13px" font-family="Segoe UI" font-style="Normal" font-weight="regular" opacity="1" text-anchor="end">6000000000</text>
         </g>
      </g>
      <defs>
         <clipPath id="Chart2_svg_ChartAreaClipRect">
            <rect id="Chart2_svg_ChartAreaClipRect" x="96" y="20" width="462" height="254" fill="white" stroke-width="1" stroke="Gray"></rect>
         </clipPath>
      </defs>
      <g id="Chart2_svg_SeriesCollection" clip-path="url(#Chart2_svg_ChartAreaClipRect)">
         <g id="Chart2_svg_SeriesGroup_0" transform="translate(96,20)" clip-path="url(#Chart2_svg_SeriesGroup_0_ClipRect)">
            <path id="Chart2_svg_Series0" fill="#800000" fill-opacity="0.5" stroke-width="1" stroke="transparent" stroke-linecap="butt" stroke-linejoin="round" d="M 12.833333333333332 254 L 12.833333333333332 254 L 38.5 62.249203321003975 L 64.16666666666667 254 L 89.83333333333333 254 L 115.5 254 L 141.16666666666669 253.86283642105533 L 166.83333333333334 251.88333333333335 L 192.5 254 L 218.16666666666666 254 L 243.83333333333334 102.77629359186668 L 269.5 254 L 295.16666666666663 254 L 320.8333333333333 254 L 346.5 254 L 372.1666666666667 254 L 397.83333333333337 254 L 423.5 254 L 449.1666666666667 254 L 449.1666666666667 254 "></path>
            <defs>
               <clipPath id="Chart2_svg_SeriesGroup_0_ClipRect">
                  <rect id="Chart2_svg_SeriesGroup_0_ClipRect" x="0" y="0" width="462" height="254" fill="white" stroke-width="1" stroke="transparent"></rect>
               </clipPath>
            </defs>
         </g>
         <g id="Chart2_svg_symbolGroup_0" transform="translate(96,20)" visibility="visible"></g>
         <g id="Chart2_svg_TextGroup_0" transform="translate(96,20)" visibility="visible"></g>
      </g>
   </svg>
</div>

題：

我想要的是遍歷每個 div 並獲取其 ID，但我無法遍歷 div。

我嘗試過的：

var alldivs = $("[class*=Chartara]");
    alldivs.each(function () {
        var allchartjsondata = JSON.parse(this);
        chartAttributeType = allchartjsondata.ChartType;
        var controllerName = chartAttributeType.replace(" ", "");
        $(chartDiv).load(controllerName, { JsonChartData: JsonFilterObject }, function () {
            $("#" + chartID).addClass("Chartara-" + jsondata["ChartType"]);
        });
    });

但它在這附近拋出這個錯誤

 alldivs.each(function () {

未捕獲的語法錯誤：意外的標記 o

1 個解決方案

解決方案1
 1 已采納  2015-09-01 07:54:03

您正在將 DOM 解析為 JSON ，這並不好，而且是一個錯誤。 你的循環工作正常。 看這個：

var alldivs = $("[class*=Chartara]");
alldivs.each(function () {
    var getJSON = $.get("/dir/your-file.json"); // get your json under server
    getJSON.success(function(result) { // on success
       var allchartjsondata = JSON.parse(result); // parse json
       chartAttributeType = allchartjsondata.ChartType;
       var controllerName = chartAttributeType.replace(" ", "");
       $(chartDiv).load(controllerName, { JsonChartData: JsonFilterObject }, function () {
           $("#" + chartID).addClass("Chartara-" + jsondata["ChartType"]);
       });
     });
});

祝你好運！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery遍歷每個div ID Jquery - 循環遍歷每個按鈕以顯示隱藏的 div jQuery每個循環為每個div寫入數據 Jquery。通過另一個Div內的Divs jQuery通過附加div遍歷數組 遍歷jQuery數組/將值輸出到div jQuery使用.each（）遍歷.hover（）函數 JQuery：無法通過$ .each循環動態數組 jQuery-如何使用每個循環遍歷JSON 如何使用$ .each JQuery遍歷JSON對象？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM