Скопировать ссылку из того же родительского div - добавить к другому дочернему элементу в том же div jquery - PullRequest
Новая
       8

Скопировать ссылку из того же родительского div - добавить к другому дочернему элементу в том же div jquery

1 голос
/ 14 февраля 2020

У меня есть 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>

Итак, я пытаюсь добиться, чтобы href из ".category-link" для каждого отдельного ".ecommMenuItem" был добавлен в ".view -все "href в том же .ecommMenuItem.

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 14 февраля 2020

Вы перебираете элемент .ecommMenuItems, который является уровнем выше группировки для каждого меню. Вместо этого вам нужно l oop вместо .ecommMenuItem вместо: 

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

Также обратите внимание, что можно избежать необходимости устанавливать inline display: none для медианных li элементов с помощью :nth-child() в CSS. Попробуйте это: 

$(".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>
...