代码之家 › 专栏 › 技术社区 › Mark

Jquery包装内部-不包括第一个元素

wrapper jquery

4

Mark · 技术社区 · 17 年前

我正试图打开/折叠我的网站中带有图例标记上的点击事件的字段集部分。但是,我需要使用wrapInner在fieldset中添加一个div来隐藏内容。..然而,这也隐藏了传说(我绝对不想这样做):-)。我如何使用wrapInner,但指定不隐藏图例(或者字段集中包含的第一个元素,因为它始终是图例)。

$("#mainarea fieldset").wrapInner("<div class='fieldsetWrapper'></div>");

$("#mainarea fieldset:not(:first)").addClass("fsClosed"); // Close all fieldsets within the main area (but not the first one)

$("#mainarea fieldset legend").mousedown(function(){  // When clicking the legend of a fieldset ...
    $("#mainarea fieldset:not(.fsClosed)").addClass("fsClosed");  // If it's already open, close it
    $(this).parent().removeClass("fsClosed");  // If it's closed, remove the closed class from the containing fieldset
    return false;
});

干杯做记号

4 回复 | 直到 17 年前

1

7

Simon Quentin 17 年前

为了回应您在Pim示例中的评论,您需要遍历字段集

$('#mainarea fieldset').each(function(){
   $(this).children().not('legend').wrapAll("<div class='fieldsetWrapper'></div>");
});

你可能会把它重构成这样;

$('#mainarea fieldset').each(function(){
   $(':not(legend)', this).wrapAll("<div class='fieldsetWrapper'></div>");
});

2

4

Pim Jager 17 年前

$('#mainarea fieldset').children(':gt(0)').wrapAll("<div class='fieldsetWrapper'></div>");

这应该能解决问题。
wrapAll函数的信息: http://docs.jquery.com/Manipulation/wrapAll#html >

编辑
甚至可能更好:

$('#mainarea fieldset').children().not('legend').wrapAll("<div class='fieldsetWrapper'></div>");

3

1

Stephen Rauch Afsar Ali 8 年前

我最终使用了以下解决方案:

//Wrap everyting in the fieldset tags
$('#mainarea fieldset').wrapInner("<div class='fieldsetWrapper'></div>");
 
//for each legend tag move it out of the newly created wrapping div 
$('legend').each(function(){
  $(this).insertBefore($(this).parent());
});

首先,它将所有内容封装在fieldset标签内(包括图例),然后“解包”图例标签。

4

0

Harry dbr 12 年前

$(document).ready(function(){
    $("fieldset legend").click(function(){
        $(this).parent().children().not('legend').toggle("slow");
    });
});