Question

我有一个由我使用的CMS自动生成的UL。我无法对服务器端代码进行任何更改。所以我决定使用jQuery进行更改。

我有以下情况。

我有一个由我的CMS生成的制造商列表，我需要将其修改为我的偏好。所以列表看起来有点像下面

2-POWER
TP-LINK
TRIUMPH AD
UTOUCH
VANGUARD
Western Digital
WHIPTAIL
WYSE
Xerox
XMINI
YAMAHA
Zyxel

我想根据自己的喜好减少此列表。

基本上我想要的只是显示我想要的制造商列表并删除其余的。我认为我的Jquery的选择部分不够好并且失败。

$("select[id$='ManufacturerContainer'] option[value!='Xerox']").remove();

HTML（仅限部分HTML）

<div id="ManufacturerContainer">
    <div class="RadTreeView RadTreeView_ ManufacturerTreeView">
        <ul class="rtUL">
            <li class="rtLI rtFirst">
                <div class="rtTop"> <span class="rtSp"></span>
                    <div class="rtIn">
                        <div class="rtTemplate" style="display: block;">    <a href="/Products/tabid/85/rvdsfmfid/2-power-11/Default.aspx">
                2-POWER</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="rtLI">
                <div class="rtMid"> <span class="rtSp"></span>
                    <div class="rtIn">
                        <div class="rtTemplate" style="display: block;">    <a href="/Products/tabid/85/rvdsfmfid/tp-link-243/Default.aspx">
                TP-LINK</a>
                        </div>
                    </div>
                </div>
            </li>           
            <li class="rtLI rtLast">
                <div class="rtBot"> <span class="rtSp"></span>

                    <div class="rtIn">
                        <div class="rtTemplate" style="display: block;">    <a href="/Products/tabid/85/rvdsfmfid/zyxel-17/Default.aspx">
                Zyxel</a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Answer 1

你可以在jquery中使用:contains选择器来完成它。

例如

for(var i=0; i<manufArrayToRemove.length; i++){
    var manuf = manufArrayToRemove[i];
    $(":contains('" + manuf  + "')").remove()
}

Answer 2

    $('.rtTemplate').each(function () 
    {
         var div = $(this).children()[0];

         var content = $(div).html();

         if(content != "Xerox")
            $(this).parent().parent().parent().remove();
    });

首先你用类“rtTemplate”循环遍历所有div，并且每个div都得到它的子元素，从那里你得到带有“.html（）”的子元素内容并在这里进行检查。

对于我的例子，我将删除所有内部没有“Xerox”的元素。

Answer 3

我建议，只需使用filter()和text()：

// select the elements, and then filter that collection:
$('.rtLI').filter(function(){
    // keep only those elements whose trimmed-text
    // (leading/trailing spaces removed) is *not* exactly equal to the string:
    return $.trim($(this).text()) !== 'Xerox';
// hide them (or 'remove()' could be used instead):
}).hide();

JS Fiddle demo（使用＆＃39; Zyxel＆＃39;字符串，而不是＆＃39; Xerox＆＃39;，只是因为您没有包含＆＃39; Xerox＆＃39;示例HTML中包含的元素。）

或者您可以使用remove()从DOM中删除那些非＆＃34; Xerox＆＃34; - 包含元素。

参考评论中的问题：

如何[I]修改此代码以显示多个[制造商的名称]。像制造商一样？

我建议：

// create an array of Manufacturer names to show:
var toShow = ['Zyxel', 'TP-LINK'];

$('.rtLI').filter(function(){
    // caching the trimmed-text (to make the next line clearer):
    var t = $.trim($(this).text());

    // keep only those elements whose trimmed-text is *not* in the
    // array of manufacturer names to keep (-1 is the index of not-found array
    // elements):
    return $.inArray(t, toShow) == -1;
}).hide();

JS Fiddle demo

参考文献：

如何从基于内部文本的列表中删除元素

3 个答案: