从同一个 parent div 复制 link - 添加到同一个 div jquery 中的另一个 child
Copy link from same parent div - add to another child within the same div jquery
我有一个输出电子商务类别列表的 cms - 我试图隐藏前 4 个之后的任何列表项,然后添加 link 以查看更多 links类别页面。类别页面 link 与我将其添加到的列表位于相同的 parent(或 grandparent??)元素中。我有这个工作来添加 link 但它似乎把第一个 link 放在所有 div 中。请看下面的代码:
$(".ecommMenuItem ul").append('<li><a href="#" class="view-all">View All</a></li>');
$(".ecommMenuItems").each(function(){
var divtext = $(".category-link", this).attr("href");
$(".view-all", this).attr("href", divtext);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="ecommMenuItems">
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/bga-stencil/" title="BGA Stencil"><i class="category-icon"><img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i><span class="category-title" style="height: 15px;">BGA Stencil</span></a>
<ul>
<li><a id="catId8468" href="/_shop/ur-selected-stencil/" title="UR Selected Stencil">UR Selected Stencil</a></li>
<li><a id="catId8469" href="/_shop/laser-tech-stencil/" title="Laser Tech Stencil">Laser Tech Stencil</a></li>
<li><a id="catId8470" href="/_shop/3d-stencil/" title="3D Stencil">3D Stencil</a></li>
<li><a id="catId8471" href="/_shop/black-stencil/" title="Black Stencil">Black Stencil</a></li>
<li style="display: none;"><a id="catId8472" href="/_shop/magnetic-stencil/" title="Magnetic Stencil">Magnetic Stencil</a></li>
<li style="display: none;"><a id="catId8473" href="/_shop/macbook-stencil/" title="MacBook Stencil">MacBook Stencil</a></li>
</ul>
</div>
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/hand-tools/" title="Hand Tools"><i class="category-icon"><img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i><span class="category-title" style="height: 15px;">Hand Tools</span></a>
<ul>
<li><a id="catId8449" href="/_shop/screwdrivers/" title="Screwdrivers">Screwdrivers</a></li>
<li><a id="catId8450" href="/_shop/tweezers/" title="Tweezers">Tweezers</a></li>
<li><a id="catId8451" href="/_shop/tool-kit-set/" title="Tool Kit Set">Tool Kit Set</a></li>
<li><a id="catId8452" href="/_shop/worksurface-mats/" title="Worksurface Mats">Worksurface Mats</a></li>
<li style="display: none;"><a id="catId8453" href="/_shop/prying--cutting/" title="Prying & Cutting">Prying & Cutting</a></li>
<li style="display: none;"><a id="catId8454" href="/_shop/gripping--holding/" title="Gripping & Holding">Gripping & Holding</a></li>
<li style="display: none;"><a id="catId8455" href="/_shop/crimping--heating/" title="Crimping & Heating">Crimping & Heating</a></li>
<li style="display: none;"><a id="catId8456" href="/_shop/cleaning-tools/" title="Cleaning Tools">Cleaning Tools</a></li>
<li style="display: none;"><a id="catId8457" href="/_shop/sim-card-tools/" title="SIM Card Tools">SIM Card Tools</a></li>
<li style="display: none;"><a id="catId8458" href="/_shop/fume-extractor/" title="Fume Extractor">Fume Extractor</a></li>
<li style="display: none;"><a id="catId8459" href="/_shop/labour-protection/" title="Labour Protection">Labour Protection</a></li>
<li style="display: none;"><a id="catId8460" href="/_shop/static-personnel-grounding/" title="Static Personnel Grounding">Static Personnel Grounding</a></li>
</ul>
</div>
</div>
所以我想要实现的是将来自每个单独“.ecommMenuItem”的“.category-link”的 href 添加到同一 .ecommMenuItem 中的“.view-all”href .
非常感谢任何帮助。
您正在遍历 .ecommMenuItems
元素,该元素位于每个菜单的分组之上。相反,您需要遍历 .ecommMenuItem
:
$(".ecommMenuItem").each(...
另请注意,使用 CSS 中的 :nth-child()
可以避免在中间 li
元素上设置内联 display: none
的需要。试试这个:
$(".ecommMenuItem ul").append('<li><a href="#" class="view-all">View All</a></li>');
$(".ecommMenuItem").each(function() {
var divtext = $(".category-link", this).attr("href");
$(".view-all", this).attr("href", divtext);
});
.ecommMenuItem li:nth-child(n+5):not(:last-child) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="ecommMenuItems">
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/bga-stencil/" title="BGA Stencil"><i class="category-icon">
<img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i>
<span class="category-title" style="height: 15px;">BGA Stencil</span>
</a>
<ul>
<li><a id="catId8468" href="/_shop/ur-selected-stencil/" title="UR Selected Stencil">UR Selected Stencil</a></li>
<li><a id="catId8469" href="/_shop/laser-tech-stencil/" title="Laser Tech Stencil">Laser Tech Stencil</a></li>
<li><a id="catId8470" href="/_shop/3d-stencil/" title="3D Stencil">3D Stencil</a></li>
<li><a id="catId8471" href="/_shop/black-stencil/" title="Black Stencil">Black Stencil</a></li>
<li><a id="catId8472" href="/_shop/magnetic-stencil/" title="Magnetic Stencil">Magnetic Stencil</a></li>
<li><a id="catId8473" href="/_shop/macbook-stencil/" title="MacBook Stencil">MacBook Stencil</a></li>
</ul>
</div>
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/hand-tools/" title="Hand Tools"><i class="category-icon">
<img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i>
<span class="category-title" style="height: 15px;">Hand Tools</span>
</a>
<ul>
<li><a id="catId8449" href="/_shop/screwdrivers/" title="Screwdrivers">Screwdrivers</a></li>
<li><a id="catId8450" href="/_shop/tweezers/" title="Tweezers">Tweezers</a></li>
<li><a id="catId8451" href="/_shop/tool-kit-set/" title="Tool Kit Set">Tool Kit Set</a></li>
<li><a id="catId8452" href="/_shop/worksurface-mats/" title="Worksurface Mats">Worksurface Mats</a></li>
<li><a id="catId8453" href="/_shop/prying--cutting/" title="Prying & Cutting">Prying & Cutting</a></li>
<li><a id="catId8454" href="/_shop/gripping--holding/" title="Gripping & Holding">Gripping & Holding</a></li>
<li><a id="catId8455" href="/_shop/crimping--heating/" title="Crimping & Heating">Crimping & Heating</a></li>
<li><a id="catId8456" href="/_shop/cleaning-tools/" title="Cleaning Tools">Cleaning Tools</a></li>
<li><a id="catId8457" href="/_shop/sim-card-tools/" title="SIM Card Tools">SIM Card Tools</a></li>
<li><a id="catId8458" href="/_shop/fume-extractor/" title="Fume Extractor">Fume Extractor</a></li>
<li><a id="catId8459" href="/_shop/labour-protection/" title="Labour Protection">Labour Protection</a></li>
<li><a id="catId8460" href="/_shop/static-personnel-grounding/" title="Static Personnel Grounding">Static Personnel Grounding</a></li>
</ul>
</div>
</div>
我有一个输出电子商务类别列表的 cms - 我试图隐藏前 4 个之后的任何列表项,然后添加 link 以查看更多 links类别页面。类别页面 link 与我将其添加到的列表位于相同的 parent(或 grandparent??)元素中。我有这个工作来添加 link 但它似乎把第一个 link 放在所有 div 中。请看下面的代码:
$(".ecommMenuItem ul").append('<li><a href="#" class="view-all">View All</a></li>');
$(".ecommMenuItems").each(function(){
var divtext = $(".category-link", this).attr("href");
$(".view-all", this).attr("href", divtext);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="ecommMenuItems">
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/bga-stencil/" title="BGA Stencil"><i class="category-icon"><img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i><span class="category-title" style="height: 15px;">BGA Stencil</span></a>
<ul>
<li><a id="catId8468" href="/_shop/ur-selected-stencil/" title="UR Selected Stencil">UR Selected Stencil</a></li>
<li><a id="catId8469" href="/_shop/laser-tech-stencil/" title="Laser Tech Stencil">Laser Tech Stencil</a></li>
<li><a id="catId8470" href="/_shop/3d-stencil/" title="3D Stencil">3D Stencil</a></li>
<li><a id="catId8471" href="/_shop/black-stencil/" title="Black Stencil">Black Stencil</a></li>
<li style="display: none;"><a id="catId8472" href="/_shop/magnetic-stencil/" title="Magnetic Stencil">Magnetic Stencil</a></li>
<li style="display: none;"><a id="catId8473" href="/_shop/macbook-stencil/" title="MacBook Stencil">MacBook Stencil</a></li>
</ul>
</div>
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/hand-tools/" title="Hand Tools"><i class="category-icon"><img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i><span class="category-title" style="height: 15px;">Hand Tools</span></a>
<ul>
<li><a id="catId8449" href="/_shop/screwdrivers/" title="Screwdrivers">Screwdrivers</a></li>
<li><a id="catId8450" href="/_shop/tweezers/" title="Tweezers">Tweezers</a></li>
<li><a id="catId8451" href="/_shop/tool-kit-set/" title="Tool Kit Set">Tool Kit Set</a></li>
<li><a id="catId8452" href="/_shop/worksurface-mats/" title="Worksurface Mats">Worksurface Mats</a></li>
<li style="display: none;"><a id="catId8453" href="/_shop/prying--cutting/" title="Prying & Cutting">Prying & Cutting</a></li>
<li style="display: none;"><a id="catId8454" href="/_shop/gripping--holding/" title="Gripping & Holding">Gripping & Holding</a></li>
<li style="display: none;"><a id="catId8455" href="/_shop/crimping--heating/" title="Crimping & Heating">Crimping & Heating</a></li>
<li style="display: none;"><a id="catId8456" href="/_shop/cleaning-tools/" title="Cleaning Tools">Cleaning Tools</a></li>
<li style="display: none;"><a id="catId8457" href="/_shop/sim-card-tools/" title="SIM Card Tools">SIM Card Tools</a></li>
<li style="display: none;"><a id="catId8458" href="/_shop/fume-extractor/" title="Fume Extractor">Fume Extractor</a></li>
<li style="display: none;"><a id="catId8459" href="/_shop/labour-protection/" title="Labour Protection">Labour Protection</a></li>
<li style="display: none;"><a id="catId8460" href="/_shop/static-personnel-grounding/" title="Static Personnel Grounding">Static Personnel Grounding</a></li>
</ul>
</div>
</div>
所以我想要实现的是将来自每个单独“.ecommMenuItem”的“.category-link”的 href 添加到同一 .ecommMenuItem 中的“.view-all”href .
非常感谢任何帮助。
您正在遍历 .ecommMenuItems
元素,该元素位于每个菜单的分组之上。相反,您需要遍历 .ecommMenuItem
:
$(".ecommMenuItem").each(...
另请注意,使用 CSS 中的 :nth-child()
可以避免在中间 li
元素上设置内联 display: none
的需要。试试这个:
$(".ecommMenuItem ul").append('<li><a href="#" class="view-all">View All</a></li>');
$(".ecommMenuItem").each(function() {
var divtext = $(".category-link", this).attr("href");
$(".view-all", this).attr("href", divtext);
});
.ecommMenuItem li:nth-child(n+5):not(:last-child) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="ecommMenuItems">
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/bga-stencil/" title="BGA Stencil"><i class="category-icon">
<img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i>
<span class="category-title" style="height: 15px;">BGA Stencil</span>
</a>
<ul>
<li><a id="catId8468" href="/_shop/ur-selected-stencil/" title="UR Selected Stencil">UR Selected Stencil</a></li>
<li><a id="catId8469" href="/_shop/laser-tech-stencil/" title="Laser Tech Stencil">Laser Tech Stencil</a></li>
<li><a id="catId8470" href="/_shop/3d-stencil/" title="3D Stencil">3D Stencil</a></li>
<li><a id="catId8471" href="/_shop/black-stencil/" title="Black Stencil">Black Stencil</a></li>
<li><a id="catId8472" href="/_shop/magnetic-stencil/" title="Magnetic Stencil">Magnetic Stencil</a></li>
<li><a id="catId8473" href="/_shop/macbook-stencil/" title="MacBook Stencil">MacBook Stencil</a></li>
</ul>
</div>
<div class="ecommMenuItem">
<a class="category-link" href="/subgroup/hand-tools/" title="Hand Tools"><i class="category-icon">
<img src="/ebuyerfix-com/_img/img/placeholder.jpg"></i>
<span class="category-title" style="height: 15px;">Hand Tools</span>
</a>
<ul>
<li><a id="catId8449" href="/_shop/screwdrivers/" title="Screwdrivers">Screwdrivers</a></li>
<li><a id="catId8450" href="/_shop/tweezers/" title="Tweezers">Tweezers</a></li>
<li><a id="catId8451" href="/_shop/tool-kit-set/" title="Tool Kit Set">Tool Kit Set</a></li>
<li><a id="catId8452" href="/_shop/worksurface-mats/" title="Worksurface Mats">Worksurface Mats</a></li>
<li><a id="catId8453" href="/_shop/prying--cutting/" title="Prying & Cutting">Prying & Cutting</a></li>
<li><a id="catId8454" href="/_shop/gripping--holding/" title="Gripping & Holding">Gripping & Holding</a></li>
<li><a id="catId8455" href="/_shop/crimping--heating/" title="Crimping & Heating">Crimping & Heating</a></li>
<li><a id="catId8456" href="/_shop/cleaning-tools/" title="Cleaning Tools">Cleaning Tools</a></li>
<li><a id="catId8457" href="/_shop/sim-card-tools/" title="SIM Card Tools">SIM Card Tools</a></li>
<li><a id="catId8458" href="/_shop/fume-extractor/" title="Fume Extractor">Fume Extractor</a></li>
<li><a id="catId8459" href="/_shop/labour-protection/" title="Labour Protection">Labour Protection</a></li>
<li><a id="catId8460" href="/_shop/static-personnel-grounding/" title="Static Personnel Grounding">Static Personnel Grounding</a></li>
</ul>
</div>
</div>