jQuery更改匹配的文本

时间:2017-05-25 12:54:58

标签: jquery ajax

我想将td值为"null"的文字更改为"Not rating found"!但它不断改变所有值,而只改变匹配的值。

$( document ).ready(function() {
$(".form-inline").submit(doStuff);
});

function doStuff(e){
e.preventDefault();

var input = $("#nanizankaInput").val();
var link = "http://api.tvmaze.com/search/shows?q=";
link = link + input; 

$.ajax({
    url: link,
    method: 'GET',
    success: function (data) {
        console.log(data);

var prazno = $("thead tr td:nth-child(3)").text();

   for(var i = 0; i < data.length; i++){
     $("thead").first().append( "<tr>" + "<td>" + data[i].show.id + "</td>" + "<td>" + data[i].show.name + "</td>" + "<td>" + data[i].show.rating.average + "</td>" +"</tr>");

     if ($("thead tr td:nth-child(3)").text("null")) {
       $("thead tr td:nth-child(3)").text("No rating found!")
     }
   }
}});
}

您必须输入"bad"之类的内容才能查看结果。

  

现场演示:http://jsbin.com/dupuzonita/edit?html,js,output

4 个答案:

答案 0 :(得分:1)

条件检查错误

if ($("thead tr td:nth-child(3)").text("null")) {
       $("thead tr td:nth-child(3)").text("No rating found!")
}

您正在设置值而不是检查它,因此它会在$(selector).text("null")

中返回true
if ($("thead tr td:nth-child(3)").text() === "null") {
       $("thead tr td:nth-child(3)").text("No rating found!")
}

答案 1 :(得分:1)

添加了评级等级和技巧。检查并试用以下代码:

&#13;
&#13;
$( document ).ready(function() {
$(".form-inline").submit(doStuff);
});

function doStuff(e){
e.preventDefault();

var input = $("#nanizankaInput").val();
var link = "http://api.tvmaze.com/search/shows?q=";
link = link + input; 

$.ajax({
    url: link,
    method: 'GET',
    success: function (data) {
        console.log(data);

var prazno = $("thead tr td:nth-child(3)").text();

   for(var i = 0; i < data.length; i++){
  	 $("thead").first().append( "<tr>" + "<td>" + data[i].show.id + "</td>" + "<td>" + data[i].show.name + "</td>" + "<td class='rating'>" + data[i].show.rating.average + "</td>" +"</tr>");

   }
     $(".rating").each(function(){
        if($(this).text() == 'null')
          $(this).text('No rating found!');
     });
}});
}
&#13;
&#13;
&#13;

答案 2 :(得分:1)

除了文本错误之外,您循环遍历行但仅检查第一行的第3行。

您需要更改以下代码。

$( document ).ready(function() {
 $(".form-inline").submit(doStuff);
});

function doStuff(e){
e.preventDefault();

var input = $("#nanizankaInput").val();
var link = "http://api.tvmaze.com/search/shows?q=";
link = link + input; 

$.ajax({
url: link,
method: 'GET',
success: function (data) {
    console.log(data);

var prazno = $("thead tr td:nth-child(3)").text();

for(var i = 0; i < data.length; i++){
 $("thead").first().append( "<tr>" + "<td>" + data[i].show.id + "</td>" + "<td>" + data[i].show.name + "</td>" + "<td>" + data[i].show.rating.average + "</td>" +"</tr>");
 var td = $("thead tr").eq(i).find("td:nth-child(3)");
 if (td.html() === "null") {
   td.html("No rating found!")
 }
}
}});
}

您也可以像使用td一样使用nth-child选择器。

$("thead tr:nth-child("+i+") td:nth-child(3)");

答案 3 :(得分:0)

只需替换为

if ( !$("thead tr td:nth-child(3)").text() )