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>

我创建了这个脚本但是例如名称颜色在任何地方都被删除。即使在项目名称或项目名称紫色必须保留在那里。我认为问题是因为第一个产品名称为商品名称，而第二个产品名称以 商品名称 开头紫

<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");

Answer 2

下面的removeAdditionalInfo（）函数和：

removeAdditionalInfo("item Name");
removeAdditionalInfo("item Name Blue");
removeAdditionalInfo("item Name Purple");

将删除其他信息项。

在javascript中进行搜索

2 个答案: