javascript - 在 javascript 中精确搜索

Question

只有在完全匹配的情况下，我才能在 javascript 中搜索文本。例如我有这样的结构:

<ul class="item-options">
    <li>First Item</li>
    <li>item Name</li>
    <li>product 1</li>
    <li>Item Description</li>
    <li>product description</li>
    <li>Additional Info</li>
    <li>Red</li>
    <li>Color</li>
    <li>Red</li>
</ul>

<ul class="item-options">
    <li>Second Item</li>
    <li>item Name Blue</li>
    <li>product 2</li>
    <li>Item Description</li>
    <li>product2 description</li>
    <li>Additional Info</li>
    <li>-----</li>
    <li>Color</li>
    <li>Blue</li>
</ul>

<ul class="item-options">
    <li>Third Item</li>
    <li>item Name Purple</li>
    <li>product 3</li>
    <li>Item Description</li>
    <li>-------</li>
    <li>Additional Info</li>
    <li>-----</li>
    <li>Color</li>
    <li>------</li>
</ul>

例如，我想检查页面中是否存在文本项目名称，然后如果项目名称文本存在，则删除关联的子项。因此，对于第一个项目名称，我只需要删除颜色:

<li>Color</li>
<li>Red</li>

然后，如果项目名称蓝色文本存在，我需要删除关联的子项

<li>Additional Info</li>
<li>-----</li>

如果第三个项目名称紫色文本存在，则删除关联的子项:

<li>Item Description</li>
<li>-------</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>------</li>

我创建了这个脚本，但例如名称Color在各处都被删除了。即使在项目名称或项目名称紫色中也必须保留在那里。我认为问题是因为第一个产品的名称为 item Name，而第二个产品的名称以 item Name 开头紫色。

<script type="text/javascript">
    jQuery(document).ready(function() {
         if (jQuery('.items-class li:contains("item Name")').length > 0)
          { 
           var parent = jQuery('.items-class');
           var children = jQuery('.items-class').find("li");
           jQuery(children).each(function(i,e){
            if(~jQuery(e).text().indexOf("item Name Blue")){

                jQuery(parent).find('li:contains("Additional Info")').html('');  
                jQuery(parent).find('li:contains("-----")').html('');
            }
             if(~jQuery(e).text().indexOf("item Name Purple")){
                jQuery(parent).find('li:contains("Item Description")').html('');  
                jQuery(parent).find('li:contains("-------")').html('');

                jQuery(parent).find('li:contains("Additional Info")').html('');  
                jQuery(parent).find('li:contains("-----")').html('');

                jQuery(parent).find('li:contains("Color")').html('');  
                jQuery(parent).find('li:contains("-----")').html('');
            }
           else if(~jQuery(e).text().indexOf("item Name")){
                jQuery(parent).find('li:contains("Color")').html('');  
                jQuery(parent).find('li:contains("Red")').html('');
            }
          });
         }   
    });
</script>

Answer 1

我不太清楚你在问什么，但希望这对你有帮助。

function removeAdditionalInfo(searchCriteria){
    var interestingTagSelector = "ul.item-options > li";
    var additionInfoHeader = "Additional Info";
    var getFilter = function(criteria){
        return function(index, item){ return (item.innerHTML === criteria); };
    };

    // find the potentially interesting li tags
    $(interestingTagSelector)

        // filter out those that are not in fact interesting
        .filter(getFilter(searchCriteria))

        // get siblings following an interesting li tag
        .nextAll()

        // ignore those not starting the additional info section
        .filter(getFilter(additionInfoHeader))

        // get siblings following the AddInfo header
        .nextAll()

        // removed them
        .remove();
}

removeAdditionalInfo("item Name");