1

我这里有两个元素：

<div class="class1">Number 1</div>
<div class="class1">EQRST923</div>

但是，页面上有多个这样的类。如果 class1 包含 EQRST923，如何更改它，数字 1 的文本将更改为 Working？

我想使用 jQuery，但通用 JavaScript 也是可以接受的。

谢谢！

4

5 回答 5

3 
$(".class1:contains('EQRST923')").prev().text('Working');

编辑：

如前所述pXl，:contains它并不准确。所以我找到了解决方案

jsFiddle 示例

您可以像这样扩展 jQuery 表达式：

$.extend( $.expr[":"], {
    containsExact: $.expr.createPseudo ?
    $.expr.createPseudo(function(text) {
        return function(elem) {
            return $.trim(elem.innerHTML) === text;
        };
    }) :
    // support: jQuery <1.8
    function(elem, i, match) {
        return $.trim(elem.innerHTML) === match[3];
    }
});

然后像以前一样简单地使用，但使用:containsExact：

$(".class1:containsExact('EQRST923')").prev().text('Working');

我的解决方案是我在jQuery 选择器上创建的编辑代码 - 添加 :contains 完全匹配。

于 2013-06-19T21:04:24.063 回答
2 
$('.class1').each(function(){
  if($.trim($(this).text()) === "EQRST923"){
     $(this).prev('.class1').text('Working');
  }
});
于 2013-06-19T20:59:35.787 回答
2

我的解决方案：

$('.class1').each(function(){
    if($(this).text() === "EQRST923" && $(this).prev().text() === "Number 1")
       $(this).prev().text("Working");
})

演示

于 2013-06-19T21:03:44.833 回答
1

我创建了一个可以添加到文件中的函数：

//@Author Karl-André Gagnon
if(!$.fn.filterText) $.fn.filterText = function(text, caseSensitive){
    var returnedObj = $(),
        caseSensitive = caseSensitive || false,
        $this = $(this);
    if(text instanceof Array){
        for(var i = 0; i < text.length; i++){
            if(typeof text[i] == 'string'){
                returnedObj = returnedObj.add($this.filter(function(){
                    var search = caseSensitive ? text[i] : new RegExp(text[i], 'i')
                    return $(this).text().search(search) != -1;
                }))
            }else if(text[i] instanceof RegExp){
                returnedObj = returnedObj.add($this.filter(function(){
                    return $(this).text().search(text[i]) != -1;
                }))
            }
        }
    }else if(typeof text == 'string'){
        returnedObj = returnedObj.add($this.filter(function(){
            var search = caseSensitive ? text : new RegExp(text, 'i')
            return $(this).text().search(search) != -1;
        }))
    }else if(text instanceof RegExp){
        returnedObj = returnedObj.add($this.filter(function(){
            return $(this).text().search(text) != -1;
        }))
    }
    return returnedObj;
}

你可以这样称呼它：

$('.class1').filterText('EQRST923').prev().text('Working');

这个函数做更多的事情，但对于你的情况，它的作用与：

$(".class1:contains('EQRST923')").prev().text('Working');

编辑：看到这个评论：

即使文本是 EQRST923222222 -pXL这也可以

所以改变它：

$('.class1').filterText(/^EQRST923$/).prev().text('Working');

小提琴：http: //jsfiddle.net/ZNPP7/

如果您认为这是太多代码（并且只需要正则表达式），您可以将方法简化为：

if(!$.fn.filterText) $.fn.filterText = function(text){
    var returnedObj = $();
    if(text instanceof RegExp){
        returnedObj = returnedObj.add($this.filter(function(){
            return $(this).text().search(text) != -1;
        }))
    }
    return returnedObj;
}
于 2013-06-19T21:09:44.500 回答
0

除了它们彼此相邻的事实之外，什么都不依赖是非常脆弱的，例如，如果有人决定更改布局并将它们移动到单独的表格单元格中，您的代码就会中断。

相反，要么添加一个包装 div：

<div class="class1group">
  <div class="class1label">Number 1</div>
  <div class="class1">EQRST923</div>
</div>

<script type="text/javascript">
$('.class1').each(function(){
    if($.trim($(this).text()) === "EQRST923"){
        $(this).parent('.class1group').find('.class1label').first().text('Working');
    }
});
</script>

或者只使用数据属性（奖励：您可以使用 css 选择器来提高速度:)：

<div class="class1" data-label-for="EQRST923">Number 1</div>
<div class="class1">EQRST923</div>

<script type="text/javascript">
$('.class1[data-label-for="EQRST923"]').text('Working');
</script>
于 2013-06-19T21:19:08.737 回答