jQuery - 在一個範圍內找到一個單詞並將該單詞添加到span元素中

我需要幫助。我已經分配了從span元素中取出一個單詞的任務，然後將該單詞作爲一個類分配給相同的span元素。jQuery - 在一個範圍內找到一個單詞並將該單詞添加到span元素中

我寫這段代碼：

jQuery(".product span").each(function() { 
if(jQuery("this:contains('hat')")) { 
    jQuery(this).addClass("hat"); 
} else if (jQuery("this:contains('sunglasses')")) { 
    jQuery(this).addClass("sunglasses"); 
} else { 
    jQuery(this).addClass("vest"); 
}; 
});

它不作爲但它應該工作。它將類「帽子」分配給類「產品」中的所有span元素。

當使用這樣的：

jQuery(".product span").each(function() { 
if(jQuery("this:contains('hat')")) { 
    jQuery(this).addClass("hat"); 
    }; 
});

它的工作原理和階級「帽子」的分配到同一個span元素。如果我這樣做，它也可以工作。但我不希望有三行代碼：

jQuery(".product span:contains('hat')").addClass("hat");

我想在一個很好的，如果和else語句，或者如果可能，採用解析另一種方式。

其他注意事項：我沒有使用jQuery的快捷方式，因爲它會與其他庫發生衝突，我很有趣。我也知道var $ js = jQuery.noConflict（）;方法。

感謝Sushanth，Kevin和Karl的熱烈響應！我希望我可以把兩個答案的解決方案

來源

2013-07-24 patorikkuv2

是不是你想要的嗎？ – Krishna

不，我想要一個很好的if和else語句。 – patorikkuv2

：contains（）區分大小寫。這可能是你的問題嗎？ – Jordan

使用。在你的代碼中的一些錯誤。

'this:contains("hat")'將不起作用，它會搜索名爲this的標記名並查看它是否包含「帽子」。

另外，如果你想檢查元素是否存在，你需要檢查是否長度。 $('ANYThING')將永遠是真實的。

我建議這樣做：

jQuery(".product span").each(function() { 
    var $this = jQuery(this); //Caching this is optimal and less writing; 
    if($this.is(":contains('hat')")) { 
     jQuery(this).addClass("hat"); 
    } else if ($this.is(":contains('sunglasses')")) { 
     $this.addClass("sunglasses"); 
    } else { 
     $this.addClass("vest"); 
    }; 
});

jQuery的.is() DOC：http://api.jquery.com/is/

此外，:contains()是大小寫敏感的，所以如果你的文本是 '太陽鏡'，將無法正常工作。

來源

2013-07-24 20:29:41

感謝一堆。這是我的問題的解決方案！我很接近。我從來不知道.is（）。我學到了一些新東西。再次感謝卡爾！區分大小寫將是我將來需要考慮的事情！ – patorikkuv2

jQuery("this:contains('hat')")

應該是

jQuery(this).filter(":contains('hat')")

this當引號內不符合元素或上下文。它應該不帶引號

jQuery(this)而不是jQuery("this")

jQuery(".product span").each(function() { 
    // cache the jQuery object 
    var $this = jQuery(this); 
    // check the length if it returns anything 
    if($this.filter(":contains('hat')").length) { 
     $this.addClass("hat"); 
    } else if ($this.filter(":contains('sunglasses')").length) { 
     $this.addClass("sunglasses"); 
    } else { 
     $this.addClass("vest"); 
    } 
});

Check Fiddle

來源

2013-07-24 20:26:57

'$ this.filter（「：contains（'hat'）」）'總是爲真，你需要檢查長度。 –

@ Karl-AndréGagnon..錯過了..感謝您指出它 –

感謝您的快速響應。當我添加額外的代碼並且雙重檢查時，我輸入了這個方法，這種方法不起作用。它仍然將類「電」分配給所有.product跨度。 – patorikkuv2

你可以做到這一點，非常簡單地使用JavaScript String replace function

這裏有一個jsfiddle link和下面的代碼。

我也冒昧，重寫代碼，讓它多一點可讀性

// Create a closure, where $ is assigned to jQuery, so we dont have to write it 
(function ($) { 

    $(".product span").each(function() { 
    findClass(this,"hat"); 
    findClass(this,"sunglasses"); 
    }); 

    function findClass(el, word) { 
    var $el = $(el); //cache element 

    $el.text().replace(word, function (match) { 
     $el.addClass(match); //add the class to our element 
     return match; //return the same word, so it's not replaced 
    }); 
    } 

})(window.jQuery);

的replace功能，需要兩個參數，一個是字符串或RegExp我們是匹配的，第二個是回調函數，它返回一個字符串來替換我們可以使用的匹配我們的優勢

通過使用RegExp，您還可以獲得忽略大小寫的好處。簡單地取代

"hat"與/hat/i，你就完成了！（在/後i，表示忽略大小寫）

希望它可以幫助

來源

2013-07-24 21:04:38 Dogoku

啊，這也是一個非常棒的解決方案。謝謝Dogoku！ – patorikkuv2

jQuery - 在一個範圍內找到一個單詞並將該單詞添加到span元素中

回答

相關問題