社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

从同一父div复制链接-添加到同一div jquery中的另一个子项

awrench • 4 年前 • 730 次点击  

我有一个cms,输出电子商务的类别列表-我试图隐藏任何列表项目后,第一个4,然后添加一个链接,以查看更多哪些链接到类别页面。类别页链接位于同一父级(或祖父母??)元素作为我要添加的列表。我有这个工作来添加链接,但它似乎放在所有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 &amp; Cutting">Prying &amp; Cutting</a></li>
		<li style="display: none;"><a id="catId8454" href="/_shop/gripping--holding/" title="Gripping &amp; Holding">Gripping &amp; Holding</a></li>
		<li style="display: none;"><a id="catId8455" href="/_shop/crimping--heating/" title="Crimping &amp; Heating">Crimping &amp; 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中,将每个人的.ecommMenuItem.category链接添加到.view all的。

任何帮助都非常感谢。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/54702
 
730 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Rory McCrossan
Reply   •   1 楼
Rory McCrossan    4 年前

你在绕着 .ecommMenuItems 元素,该元素高于每个菜单的分组级别。相反,你需要在 .ecommMenuItem

$(".ecommMenuItem").each(...

还要注意,这样可以避免设置内联 display: none li 使用的元素 :nth-child()

$(".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 &amp; Cutting">Prying &amp; Cutting</a></li>
      <li><a id="catId8454" href="/_shop/gripping--holding/" title="Gripping &amp; Holding">Gripping &amp; Holding</a></li>
      <li><a id="catId8455" href="/_shop/crimping--heating/" title="Crimping &amp; Heating">Crimping &amp; 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>