Question

我这里有两个元素：

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

但是，页面上有多个类。如果更改它，如果class1包含EQRST923，则数字1的文本变为工作？

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

谢谢！

Answer 1

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

修改

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

jsFiddle example

您可以像这样扩展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 Selectors - Adding a :contains exact match上创建的编辑代码。

Answer 2

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

Answer 3

我的解决方案：

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

<强> DEMO

Answer 4

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

//@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;
}

Answer 5

除了彼此相邻的事实之外什么也不依赖，如果某人决定更改布局并将其移动到单独的表格单元格中，则代码将会中断。

相反，要么添加包装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>

如何更改包含字符串的元素上方的类？

5 个答案: