如何使用 jQuery 选择下一个 div?

Posted

技术标签:

【中文标题】如何使用 jQuery 选择下一个 div?【英文标题】:How can I select the next div using jQuery? 【发布时间】:2011-06-02 09:04:58 【问题描述】:

对于 jQuery,我是个菜鸟,我正在尝试使用 next() 选择器选择下一个元素,但在让它工作时遇到了一些麻烦!

我要做的是在用户完成对 ui 滑块的选择后激活 slideDown()。这是我的代码:

$('.slider').slider( stop: function(event, ui) $(this).nextAll('.secondq:first').slideDown('slow') );

问题是,这根本行不通。仅当我将“secondq”问题放在 ui 滑块的父 div 中时,它才会起作用。这是我的 html

<div class="option">
                            <h2 align="left">How high is your ceiling from the floor?</h2>
                            <input type="text" align="right" name="bonus" class="value" disabled="disabled"  />
                            <div class="slidewrap">
                                <div class="sliderFt slider"></div>
                            </div>
                        </div>
                        <!-- End Option -->
                        <div class="option">
                            <h2 align="left">How many windows do you have?</h2>
                            <input type="text" align="right" name="bonus" class="value" disabled="disabled"  />
                            <div class="slidewrap">
                                <div class="sliderWinDoor slider"></div>
                            </div>
                            <div class="secondq" style="display:none;">
                                <h2>What type of material are your windows made of?</h2>
                                <div class="radiocont">
                                    <label>Wood</label>
                                    <input type="radio" class="styled" value="wood" name="windowtype" />
                                </div>
                                <div class="radiocont">
                                    <label>Metal</label>
                                    <input type="radio" class="styled" value="metal" name="windowtype" />
                                </div>
                                <div class="radiocont">
                                    <label>PVC</label>
                                    <input type="radio" class="styled" value="pvc" name="windowtype" />
                                </div>
                            </div>
                        </div>

【问题讨论】:

【参考方案1】:

nextAll 只获得兄弟姐妹。根据您的 HTML 结构,您可以:

$(this).parent().next()

为了使其更独立于结构,您还可以这样做:

$(this).closest('.slidewrap').nextAll('.secondq:first')

【讨论】:

以上是关于如何使用 jQuery 选择下一个 div?的主要内容,如果未能解决你的问题,请参考以下文章

Yii2:如何使用 jQuery 使 <div> 禁用/只读

如何使用 jquery 的 animate 方法使 div 来回移动

如何使用jquery排除子选择器中的子项?

Jquery - 如何从中选择下一个元素?

如何使用 jQuery 选择第一个父 DIV?

如何使 jquery 创建的 div 可拖动?