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を使用して各タグの周りにタグをラップし、既存の2つの間に新しい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出力が生成され、想定どおりに機能しますが、さらに多くのセクションがあるため、セクションclass="flexslidershop"内にあるulclass="flex-direction-nav"を具体的にターゲットにする必要があります。ページ上の複数のulclass= "flex-direction-nav"