草庐IT

javascript - 在 jQuery 中用递增的 id 包裹嵌套的 <div> 元素

coder 2023-08-09 原文

我刚开始学习 jQuery，遇到了一个困扰我的问题。我需要在不影响内容的情况下移动、添加和命名 div。

我有一个固定宽度的 WRAPPER div，里面有 SECTION div。这是它的样子:

<body>
<div id="whitewrap">

    <div id="wrapper-1" class="wrapper">
        <div class="clearfix">

            <section id="block-1">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-1 -->

            <section id="block-2">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-2 -->

            <section id="block-3">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-3 -->

        </div><!-- .clearfix -->
    </div><!-- #wrapper-1 -->

</div><!-- #whitewrap -->
</body>

我需要的是每个 SECTION 都有自己的 WRAPPER div，并在每个包装器周围添加一个 CONTAINER div。 WRAPPERS 和 CONTAINERS 的 ID # 需要自动增加，因为 SECTIONS 是动态添加的。

这是我想象的。

<body>
<div id="whitewrap">

    <div id="container-1">
        <div id="wrapper-1" class="wrapper">
            <div class="clearfix">

            <section id="block-1">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-1 -->

            </div><!-- .clearfix -->
        </div><!-- #wrapper-1 -->
    </div><!--#container-1 -->

    <div id="container-2">
        <div id="wrapper-2" class="wrapper">
            <div class="clearfix">

            <section id="block-2">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-2 -->

            </div><!-- .clearfix -->
        </div><!-- #wrapper-2 -->
    </div><!--#container-2 -->

    <div id="container-3">
        <div id="wrapper-3" class="wrapper">
            <div class="clearfix">

            <section id="block-3">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-3 -->

            </div><!-- .clearfix -->
        </div><!-- #wrapper-3 -->
    </div><!--#container-3 -->

</div><!-- #whitewrap -->
</body>

谢谢大家!

最佳答案

使用 jQuery 的 .wrap() 具有递增计数器的功能。将函数传递给 .wrap()它构建了一个 HTML 片段来包围每个 <section> ，根据需要在 ids 中使用计数器并递增它:

var counter = 1;
$('section').wrap(function() {
  // Make a string of the HTML which should wrap around each <section>
  var wrapper = '<div id="container-' + counter + '"><div id="wrapper-' + counter + '" class="wrapper"></div></div>';
  // Increment the counter
  counter++;
  // Return the string and it will be applied around each <section>
  return wrapper;
});

Here's a demo...

注意:您已经有一个 <div id="wrapper-1" />围绕整个事情。如果应该删除它(如果你在 wrapper-1 周围有另一个 <section> 应该删除它)，请使用 .unwrap() 第一:

$("div.clearfix").unwrap();
// Then run the rest of the code...

As in this demo...

关于javascript - 在 jQuery 中用递增的 id 包裹嵌套的 <div> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11697029/

中用javascriptgtltsectionjqueryhtml

有关javascript - 在 jQuery 中用递增的 id 包裹嵌套的 <div> 元素的更多相关文章

  1. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  2. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  3. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  4. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  7. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  8. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  9. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  10. ruby-on-rails - 没有参数的 `<<`(小于两倍)是什么意思？ - 2

    我在一个我想在formtasticGem中覆盖的方法中找到了这个。该方法如下所示:defto_htmlinput_wrappingdohidden_field_html是什么意思？在第三行做什么？我知道它对数组有什么作用，但在这里我不知道。 最佳答案 你可以这样读:hidden_field_htmllabel_with_nested_checkbox是连接到hidden_​​field_html末尾的参数-为了“清晰”，他们将其分成两行 关于ruby-on-rails-没有参数的`

随机推荐