Question

我想在同一页面中删除重复的网址。请查看以下标记。

Page url为http://www.example.com/school-products.html

所有小部件都重复

http://www.example.com/school-products.html。我想添加一个类并删除它们。

请帮助我。

我尝试使用以下jQuery。但它没有用。

<div class="main-container">
    <div class="product-description">
    <h1>School products</h1>
        <p>This is a product description</p>
    </div>

    <div class="aside-right">
        <div class="widget related-products">
            <ul>
                <li><a href="/imaging-products.html">Imaging Products</a></li>
                <li><a href="/writing-products.html">Writing Products</a></li>
                <li><a href="/school-products.html">School Products</a></li>
                <li><a href="/notebook-products.html">Notebook Products</a></li>
                <li><a href="/drawing-products.html">Drawing Products</a></li>
            </ul>
        </div>

        <div class="widget more-products">
            <ul>
                <li><a href="/mobile-products.html">Mobile Products</a></li>
                <li><a href="/tablet-products.html">Tablet Products</a></li>
                <li><a href="/school-products.html">School Products</a></li>
                <li><a href="/computer-products.html">Computer Products</a></li>
                <li><a href="/printing-products.html">Printing Products</a></li>
            </ul>
        </div>

        <div class="widget suggested-products">
            <ul>
                <li><a href="/home-products.html">Home Products</a></li>
                <li><a href="/office-products.html">Office Products</a></li>
                <li><a href="/school-products.html">School Products</a></li>
                <li><a href="/library-products.html">Home Products</a></li>
                <li><a href="/toy-products.html">Toy Products</a></li>
            </ul>
        </div>
    </div>
</div>

$(function () {
    'use strict';
    $('.widget li a').each(function () {
        var _remove_repeat = window.location.href;
        if (_remove_repeat === window.location.href) {
            $(this).find(_remove_repeat).addClass('repeat-to-be-removed').remove();
        }
    });
});

Answer 1

您可以使用选择器查找所有列表项，其中锚点指向您的网址并将其删除：

$(document).ready(function() {
    $("li a[href='/school-products.html']").parent().remove();
});

https://jsfiddle.net/7w6wdjv1/

Answer 2

不需要.each循环。您只需定位与a匹配的任何window.location.pathname代码，然后将DOM向上移动到其父代li和remove()。

在下面的示例中，我对样本路径进行了硬编码。在生产中，您需要取消注释第二行以获取当前路径。

＆＃13;

var currentPath = '/writing-products.html';
// var currentPath = window.location.pathname

$(document).ready(function() {

    $('.widget a[href="' + currentPath + '"]').parents('li').remove()

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div class="product-description">
    <h1>School products</h1>
    <p>This is a product description</p>
  </div>

  <div class="aside-right">
    <div class="widget related-products">
      <ul>
        <li><a href="/imaging-products.html">Imaging Products</a>
        </li>
        <li><a href="/writing-products.html">Writing Products</a>
        </li>
        <li><a href="/school-products.html">School Products</a>
        </li>
        <li><a href="/notebook-products.html">Notebook Products</a>
        </li>
        <li><a href="/drawing-products.html">Drawing Products</a>
        </li>
      </ul>
    </div>

    <div class="widget more-products">
      <ul>
        <li><a href="/mobile-products.html">Mobile Products</a>
        </li>
        <li><a href="/tablet-products.html">Tablet Products</a>
        </li>
        <li><a href="/school-products.html">School Products</a>
        </li>
        <li><a href="/computer-products.html">Computer Products</a>
        </li>
        <li><a href="/printing-products.html">Printing Products</a>
        </li>
      </ul>
    </div>

    <div class="widget suggested-products">
      <ul>
        <li><a href="/home-products.html">Home Products</a>
        </li>
        <li><a href="/office-products.html">Office Products</a>
        </li>
        <li><a href="/school-products.html">School Products</a>
        </li>
        <li><a href="/library-products.html">Home Products</a>
        </li>
        <li><a href="/toy-products.html">Toy Products</a>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

删除与当前URL对应的导航链接

2 个答案: