我对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/
我希望有人能够教会我如何扩展这个范围并让这个脚本按预期工作。
答案 0 :(得分:1)
选择器$('input#survey_scores_score_item', 'h3')
相当于$('h3').find('input#survey_scores_score_item')
。
由于h3
不包含任何子项,因此您永远不会选择任何元素。如果您已经拥有元素的id
,则无需将选择器放在任何类型的上下文中,只需使用:$("#survey_scores_score_item")
。