Question

我正在编写超过1000个标题的索引。我有2个jsfiddles，一个有效，但我需要永远编码所有标题。所以我找到了一种方法来复制索引并将其转换为html，但它被列为所有p，并且不确定我是否能够继续使用它。这是工作的小提琴和代码。 https://jsfiddle.net/jim54729/91d9zbtb/

    <div class="list-container">
 <!-- The A List -->
    <div class="title">
        <button>A</button>
    </div>
    <div class="title-contents">
        <li class="contents-description">
            <a href="#">50010 My first book</a>
        </li>       
          <p><strong>Class Code:</strong> 50010<br><strong>Author</strong>Jim Schwetz<br><strong>Note:</strong><br>The following shall be sold separately:<br>- COver<br>- Index</p>
        <li class="contents-description">
            <a href="#">50011 My second book</a>
        </li>
        <p><strong>Class Code:</strong><br><strong>Author:</strong>Me again<br><strong>Note:</strong><br>The following shall be sold separately<br>-  Steel backing<br>- Wire binding</p>       
    </div>    
<!-- The B List -->

和jQuery

$(document).ready(function() {
  $('.title-contents').hide();
  $('p').hide();
  $('.title').click(function() {
  $(this).next('.title-contents').fadeToggle(700);
  });
  $('.contents-description').click(function() {
    $(this).next('p').fadeToggle(700);
  });
});

当我复制并粘贴内容并将其转换为html时，我得到了https://jsfiddle.net/jim54729/ojn24b5o/2/我为第一个标题添加了2个类，但我必须将其添加到1000个标题中。

<p class="title">50010 title of My book</p>
<p class="title-contents"><strong>Class Code:</strong> 50010</p>
<p><strong>author</strong> me</p>
<p><strong>Note:</strong></p>
<p>The following shall be sold separately:</p>
<ul>
<li>cover</li>
<li>index</li>
</ul>

<p>50011 title of My 2nd book- notice no class</p>
<p><strong>Class Code:</strong> 50011</p>
<p><strong>author</strong> me</p>
<p><strong>Note:</strong></p>
<p>The following shall be sold separately:</p>
<ul>
<li>cover</li>
<li>index</li>
</ul>

和js

$(document).ready(function() {
  $('p:not(.title)').hide();
  $('li').hide();

  $('.title').click(function() {
    $(this).next('.title-contents').fadeToggle(700);
  });
  $('.contents-description').click(function() {
    $(this).next('p').fadeToggle(700);
  });


});

Answer 1

这是一种包装每个section的方法。它还隐藏了截面中的所有标题，单击标题将切换该部分中的所有其他元素（类似手风琴）

var $ul = $('ul').hide()
// work from bottom up wrapping elements into sections
for (var i = $ul.length - 1; i >= 0; i--) {
    var list = $ul.eq(i)
    list.add(list.prevUntil('ul')).wrapAll('<div class="section">')
}
// work through sections adding behaviors 
$('.section').each(function(){   
  var $p= $(this).children('p').hide();
  $p.eq(0).show().addClass('title').click(function(){
      $(this).siblings().toggle()
  });
})

的 DEMO

Answer 2

也许我不理解这个问题或想要的结果，但是如果你的所有标记都遵循上面列出的相同模式，那么我认为你可能会过度思考这个问题。您是否尝试在文本编辑器中使用简单的查找和替换来添加类？例如，对于标题类，您可以搜索：

"<p>5" and replace it with "<p class="title">5"

，对于title-contents类，您可以搜索：

"<p><strong>Class Code:" and repleace it with "<p class="title-contents"><strong>Class Code:"

当然我不知道你的内容的全部范围，所以你想要评估每个实例并确保它遵循模式，或者定制模式以适应它，但这会给你你想要的课程结构体。

这也假设您不需要动态解决方案，因为您提到了复制和粘贴。

请注意，这不是一个程序化的解决方案，这只是一次性场景的实用解决方案。

重新格式化我的jQuery以仅选择此类下的p

2 个答案: