Question

我想查看同一个班级的一系列元素，看看他们的值是否以＆＃39; http＆＃39;如果这是真的，那些元素应该添加一个新类。

$('#btn').click(function () {
    if ($('span.value').text().indexOf('http') == 0 ) 
    {
        $('span.value').addClass('url'); 
    } else {
        $('span.value').addClass('notURL');
    }
});

此JSFIDDLE是我迄今为止所获得的，但它将新课程添加到所有元素中，即使是那些不以＃＆＃39; http＆＃开头的元素39;

我不确定问题是什么？

Answer 1

您需要单独迭代每个范围：

$('#btn').click(function () {
    $('span.value').each(function () {
        if ($(this).text().indexOf('http') == 0) {
            $(this).addClass('url');
        } else {
            $(this).addClass('notURL');
        }
    })
});

<强> jsFiddle example

Answer 2

您只需检查范围，您必须使用.each功能逐一检查所有范围：

$('#btn').click(function () {
   $('span.value').each(function () {
    if ($(this).text().indexOf('http') == 0) {
        $(this).addClass('url');
    } else {
        $(this).addClass('notURL');
    }
})
});

DEMO

您的代码正在检查一个（第一个DOM）span元素并将css应用于所有元素。

Answer 3

您可以将addClass与函数

一起使用

$('#btn').click(function () {
    $('span.value').addClass(function(){
        return $(this).text().indexOf('http') == 0 ? 'url' : 'notURL';
    });        
});

FIDDLE

您需要遍历每个元素以检查文本值。通过使用带有函数this的addClass，将引用集合中的当前元素。

.addClass( function )
function
Type: Function( Integer index, String currentClassName ) => String
A function returning one or more space-separated class names to be added to
the existing class name(s). Receives the index position of the element in the 
set and the existing class name(s) as arguments. Within the function, this 
refers to the current element in the set.

Answer 4

Manwal答案很好，但是如果你想特定检查值或字符串是否以＆＃34; http＆＃34;我建议像这样使用javascript substring：

var name = "http://";
var containsHTTP = name.substring(0,4) == 'http' ? 'yess' : 'no';
alert(containsHTTP);

// How to use it in your code    
$('#btn').click(function () {
    if ($('span.value').text().substring(0,4) == 'http' ) 
    {
        $('span.value').addClass('url'); 
    } else {
        $('span.value').addClass('notURL');
    }
});

JSFIDDLE

Answer 5

在您的示例中，

$("span.value").text()将返回一个字符串，其中包含具有类值的每个范围的文本：http://google.co.ukhttp://www.barratthomes.co.uk:80/globalassets/property-c…trumpington-meadows_new.jpg?preset=Original&v=20150625112515873CheeseCream

这将改变每个span.value：$('span.value').addClass('url');

的类

您需要做的是单独迭代每个跨度，如下所示：

$('#btn').click(function () {
    $('span.value').each(function () {
        if ($(this).text().indexOf('http') == 0) {
            $(this).addClass('url');
        } else {
            $(this).addClass('notURL');
        }
    });
});

Answer 6

不要忘记https和://。

$('#btn').click(function () {
    $('span.value').each(function()
    {
        var match = /^https?:\/\//.test($(this).text());
        $(this).addClass(match ? 'url' : 'notURL');
    });
});

Answer 7

实际上您的问题是，您始终将这两个类添加到您应该使用的所有元素$(this)而不是$('span.value')

您可以在此正则表达式/^http/中使用 String.prototype.match() 方法，这是您需要的功能：

$('span.value').each(function () {
    if ($(this).text().match(/^http/)) {
        $(this).addClass('url');
        console.log("OK");
    } else {
        $(this).addClass('notURL');
        console.log("not OK");
    }
});

这是 updated Fiddle 。

Answer 8

与所有jQuery getter一样，函数$('span.value').text()仅返回集合中第一个元素的值。使用each逐个访问每个元素“text()。

$('#btn').click(function () {
    $('span.value').each(function(){
        if ($(this).text().indexOf('http') == 0 ) 
        {
            $(this).addClass('url'); 
        } else {
            $(this).addClass('notURL');
        }
    })
});

检查元素值是否以＆＃39; http＆＃39;开头，如果为true，则更改元素类

8 个答案: