1

我在使用 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 工作。此外，所有这些都需要在页面完全加载后发生，但除此之外没有其他触发器。

更新

我现在在你们中的一些人的帮助下让它半工作，这是我到目前为止所拥有的，它应该可以工作，问题是 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 输出并按预期工作，但是我需要它专门针对 section class="flexslider shop" 内部的 ul class="flex-direction-nav" 因为还有更多页面上超过一个 ul class="flex-direction-nav"

4

4 回答 4

1

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

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

我需要它专门针对部分 class="flexslider shop" 内部的 ul class="flex-direction-nav"

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

$("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 ...）可能就足够了。

于 2013-03-05T07:49:54.977 回答
0

请检查 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 和 removeClass 来实现这个目标。这取决于您的选择。希望这会帮助你。

于 2013-03-05T07:38:32.767 回答
0

你在寻找这样的东西吗？

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);

现场演示

于 2013-03-05T07:41:19.520 回答
0

这样做：

$(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" />');
});
于 2013-03-05T07:49:45.920 回答