Question

我有一些问题使用jquery来包装一个标签周围的块，我认为我遇到的最大问题是jquery选择器，但我对jquery很新，所以我不知道究竟是哪里的问题是。

我有以下html

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <a href="#" class="flex-prev">Previous</a>
        </li>
        <li>
            <a href="#" class="flex-next">Next</a>
        </li>
    </ul>
</section>

我需要使用jquery在每个标记周围包装一个标记，并在两个现有标记之间插入一个新的li元素，在jquery进行修改之后的最终结果应该如下：

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <i class="icon-circle-arrow-left">
                <a href="#" class="flex-prev">Previous</a>
            </i>
        </li>
        <li>
            <i class="icon-zoom-in">
                <a href="#" id="nav-zoom-in"></a>
            </i>
        </li>
        <li>
            <i class="icon-circle-arrow-right">
                <a href="#" class="flex-next">Next</a>
            </i>
        </li>
    </ul>
</section>

非常感谢任何可以给予的帮助。我搜索了几个小时，但无法弄清楚如何解决这种复杂性的问题。此外，所有这一切都需要在页面完全加载后发生，除此之外没有其他触发器。

更新

我现在已经在你们中的一些人的帮助下半工作了，这是我到目前为止所做的并且它应该工作，问题是jquery中的选择器不够具体，我无法修改html因为它是由一个jquery插件生成的，所以我试图通过使用你们都帮助我的这个小脚本来修改该插件，到目前为止我的内容如下：

相关脚本生成以下html：

 <ul class="flex-direction-nav">
     <li>
         <a href="#" class="flex-prev">Previous</a>
     </li>
     <li>
         <a href="#" class="flex-next">Next</a>
     </li>
 </ul>

我添加了一个类的标签，以便通过jquery来定位它，所以html现在看起来如下：

<section class="flexslider shop">
    <ul class="flex-direction-nav">
        <li>
            <a href="#" class="flex-prev">Previous</a>
        </li>
        <li>
            <a href="#" class="flex-next">Next</a>
        </li>
    </ul>
</section>

我现在使用的jquery如下所示，它根据需要进行，但由于页面上有多个滑块，因此不够具体。

$(window).load(function() {
    $(".flex-direction-nav li:last").before('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');
    $(".flex-prev").wrap('<i class="icon-circle-arrow-left" />');
    $(".flex-next").wrap('<i class="icon-circle-arrow-right" />');
});

现在正在生成正确的html输出并且正在按预期工作，但是我需要它专门针对ul class =“flex-direction-nav”，它位于section class“”flexslider shop“之内页面上有多个ul class =“flex-direction-nav”

Answer 1

对于初学者，我不建议使用<i>标记。它告诉浏览器应该是什么样的，而不是的内容。 <i>是表现性的，而非语义性的。 <em>标记（强调）更好（语义），但在您的情况下，您可能只需将.flexslider li a{font-style: italic}添加到CSS中。

但是，让我们假设额外的标签是必要的，这样元素就可以通过一个源代码无法更改的插件找到。

我需要它专门针对ul class =＆＃34; flex-direction-nav＆＃34;这是在类class =＆＃34; flexslider shop＆＃34;
之内

这应该从您的示例中获得所需的输出：

$("section.flexslider.shop ul.flex-direction-nav").each(function(){
  $(".flex-prev", this).wrap('<i class="icon-circle-arrow-left">')
  $(".flex-next", this).wrap('<i class="icon-circle-arrow-right">')
  .before(
    '<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>
  ')
)};

我使用了each，因此仅查询选择器section.flexslider.shop ul.flex-direction-nav一次。这减少了所需的代码量，并且（希望）可以提高性能。将this作为第二个参数传递给jQuery会限制前一个选择器的范围。

另一种方法是直接使用section.flexslider.shop ul.flex-direction-nav .flex-prev和section.flexslider.shop ul.flex-direction-nav .flex-next作为两个选择器，而不先选择section.flexslider.shop ul.flex-direction-nav。但请注意，所需的代码量。另请注意，不太具体的选择器（例如，.flex-direction-nav ...）可能就足够了。

Answer 2

请检查 http://api.jquery.com/insertBefore/ ＆安培; http://api.jquery.com/insertAfter/

$('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>').insertBefore('.flex-next').parent();

$('<i class="icon-circle-arrow-left">').insertBefore('.flex-prev');

$('</i>').insertAfter('.flex-prev');

$('<i class="icon-circle-arrow-right">').insertBefore('.flex-next');$('</i>').insertAfter('.flex-next');

它将解决您的问题。

但有一点必须考虑，你可以通过使用addClass＆amp; amp;来实现这个目标。 removeClass。这取决于你的选择。希望这会对你有所帮助。

Answer 3

你在找这样的东西吗？

var zoom = $('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');

$('.flex-next').wrap('<i class="icon-circle-arrow-right" />');
$('.flex-prev').wrap('<i class="icon-circle-arrow-left" />').parents('li').after(zoom);

Live Demo

Answer 4

这样做：

$(document).ready(function(){
    $(".flexslider .flex-direction-nav li:last").before('<li><i class="icon-zoom-in"><a href="#" id="nav-zoom-in"></a></i></li>');
    $(".flexslider .flex-direction-nav li a.flex-prev").wrap('<i class="icon-circle-arrow-left" />');
    $(".flexslider .flex-direction-nav li a.flex-next").wrap('<i class="icon-circle-arrow-right" />');
});

jQuery复杂选择器，在单个元素中有多个类

4 个答案: