在javascript中确定选择器的范围?

时间:2014-03-06 16:38:03

标签: javascript jquery ruby-on-rails-4

我对JS和jQuery缺乏经验,并编写了这个简单的脚本,将h3范围内的一些表单输入加到同一范围内的div中。但我什么都没有。使用控制台,我可以确定它正确获取了keyup事件的初始值,但是当我尝试在h3范围内获取这些项时,它会出现一个空数组。阅读jQuery()文档,

 $( 'input#survey_scores_score_item, div.my_group')

产生一个哈希,很好地显示了这些分组的三个数组。但也是所有个人输入项目。很明显,我没有正确设置这些查询。我如何设置范围,以便单个输入不会使数组混乱,这样我就可以在组上运行jQuery .each?

这是我的标记:

<body>    
<form accept-charset="UTF-8" action="/surveys/1" class="edit_survey" id="edit_survey_1" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div>

    <h2>General</h2>
      <h3>Policies and Procedures</h3>
 <div class="my_group">
        <div class="item_enclosure row">
            <div class="item_text small-9 large-9 columns">
                GivEx and Smart Cards being tracked? 
            </div>
            <div class="small-3 columns">
                <div class="item_scoring">
                <div class="row">
                    <div class="item_score item-6 small-6 columns">     
                        <input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="2" type="text">
                        <input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">    
                    </div>
                    <div class="item_hiscore item-6 small-6 columns">
                        / 2
                    </div>
                </div>
            </div>                  
            </div>              
        </div> 
        <div class="item_enclosure row">
            <div class="item_text small-9 large-9 columns">
                Change Fund/Petty Cash (810) reviewed daily? 
            </div>
            <div class="small-3 columns">
                <div class="item_scoring">
                <div class="row">
                    <div class="item_score item-8 small-6 columns">     
                        <input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="5" type="text">
                        <input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">    
                    </div>
                    <div class="item_hiscore item-8 small-6 columns">
                        / 5
                    </div>
                </div>
            </div>                  
            </div>              
        </div> 
              <div class="item enclosure row"> 
                    <div class="item_text total small-9 large-9 columns">
                        Total:
                    </div>
                    <div class="item_scoring item_scoring_total small-3 total columns">
                        <div class="row">
                            <div class="item_score item_score_total small-6 columns">
                                XX
                            </div>
                            <div class="item_hiscore total small-6 columns">
                                / 7
                            </div>
                        </div>
                    </div>                      
                </div>
</div>
      <h3>Physical Security</h3>
 <div class="my_group">
        <div class="item_enclosure row">
            <div class="item_text small-9 large-9 columns">
                POS area is neat and well organized 
                  <!-- br--><p>No clutter around POS - Check card readers 
<br>Bills $20.00 and larger and checks under till and neatly organized</p>
            </div>
            <div class="small-3 columns">
                <div class="item_scoring">
                <div class="row">
                    <div class="item_score item-7 small-6 columns">     
                        <input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="1" type="text">
                        <input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">   
                    </div>
                    <div class="item_hiscore item-7 small-6 columns">
                        / 1
                    </div>
                </div>
            </div>                  
            </div>              
        </div> 
              <div class="item enclosure row"> 
                    <div class="item_text total small-9 large-9 columns">
                        Total:
                    </div>
                    <div class="item_scoring item_scoring_total small-3 total columns">
                        <div class="row">
                            <div class="item_score item_score_total small-6 columns">
                                XX
                            </div>
                            <div class="item_hiscore total small-6 columns">
                                / 1
                            </div>
                        </div>
                    </div>                      
                </div>    
      <h3>Safety</h3>
  <div class="my_group">
        <div class="item_enclosure row">
            <div class="item_text small-9 large-9 columns">
                Attendant wearing gloves 
            </div>
            <div class="small-3 columns">
                <div class="item_scoring">
                <div class="row">
                    <div class="item_score item-10 small-6 columns">    
                        <input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="8" type="text">
                        <input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">  
                    </div>
                    <div class="item_hiscore item-10 small-6 columns">
                        / 8
                    </div>
                </div>
            </div>                  
            </div>              
        </div> 
        <div class="item_enclosure row">
            <div class="item_text small-9 large-9 columns">
                Proper Lifting by attendants 
            </div>
            <div class="small-3 columns">
                <div class="item_scoring">
                <div class="row">
                    <div class="item_score item-11 small-6 columns">    
                        <input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="5" type="text">
                        <input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">  
                    </div>
                    <div class="item_hiscore item-11 small-6 columns">
                        / 5
                    </div>
                </div>
            </div>                  
            </div>              
        </div> 
        <div class="item_enclosure row">
            <div class="item_text small-9 large-9 columns">
                Area in and around DEC clean 
            </div>
            <div class="small-3 columns">
                <div class="item_scoring">
                <div class="row">
                    <div class="item_score item-9 small-6 columns">     
                        <input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="1" type="text">
                        <input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">   
                    </div>
                    <div class="item_hiscore item-9 small-6 columns">
                        / 1
                    </div>
                </div>
            </div>                  
            </div>              
        </div> 
              <div class="item enclosure row"> 
                    <div class="item_text total small-9 large-9 columns">
                        Total:
                    </div>
                    <div class="item_scoring item_scoring_total small-3 total columns">
                        <div class="row">
                            <div class="item_score item_score_total small-6 columns">
                                XX
                            </div>
                            <div class="item_hiscore total small-6 columns">
                                / 14
                            </div>
                        </div>
                    </div>                      
                </div>
</div>   
    <input name="commit" type="submit" value="Edit survey">
</form>
    </main>    
</body></html>

答案正在帮助我看到我无法在h3中选择特定标签,因为它是自己的元素。所以我修改了标记,以便每个逻辑分组都在一个带有“my_group”类的div中。我正试图让我在Fiddle的脚本工作总计在这些div中找到的所有输入。我需要找到一种逻辑方法让这个脚本在这些逻辑单元中找到的方法。

我的更新小提琴在这里:http://jsfiddle.net/sam452/Yk33t/7/

我希望有人能够教会我如何扩展这个范围并让这个脚本按预期工作。

1 个答案:

答案 0 :(得分:1)

选择器$('input#survey_scores_score_item', 'h3')相当于$('h3').find('input#survey_scores_score_item')

由于h3不包含任何子项,因此您永远不会选择任何元素。如果您已经拥有元素的id,则无需将选择器放在任何类型的上下文中,只需使用:$("#survey_scores_score_item")