jQuery: 请问哪里有错？

水木社区手机版

主题:jQuery: 请问哪里有错？
楼主|cowell|2015-06-20 21:02:08|展开
<td>的title里摆放了一些字串。如果字串里含有特定的字串，想要高亮。
$('.pinmap td').filter(function(){var t = $(this).attr("title"); return t.substring(t.lastIndexOf("Functional Block ")).indexOf("Test")>=0;}).css("background-color","#FF0");

各种调试，死活不工作。
做一个简单的测试，可以看到返回的时true。
var sss=$('.pinmap tr:nth-child(3) td:nth-child(3)').attr('title');
$('#test').html(/Test/i.test(sss.substring(sss.lastIndexOf("Functional Block "))));

请问问题出在哪里呢？
--
FROM 114.165.107.*
2楼|cowell|2015-06-20 21:57:38|展开
代码是放在$(document).ready(function(){里的。
应该不是这个问题吧？

【在 Balancer 的大作中提到: 】
: 加载完页面后再运行代码
:
--
FROM 114.165.107.*
4楼|cowell|2015-06-20 22:51:49|展开
没看明白你问这个的用意。
substring()出来是字符串，后面接.indexOf()来确认是否含特定字符串，返回true或false来给filter()做筛选。
我的代码有点乱，稍微做下格式整理如下：

$('.pinmap td').filter(function(){
    var t = $(this).attr("title");
    return t.substring(t.lastIndexOf("Functional Block ")).indexOf("Test")>=0;
})
.css("background-color","#FF0");


【在 Balancer 的大作中提到: 】
: t.substring()，结果是字符串，不是dom节点吧？
:
--
FROM 114.165.107.*
6楼|cowell|2015-06-21 06:31:30|展开
那应该如何改呢？

我的理解是return那里只是一个条件语句，如果返回是true，那么这个element就会被filter过滤出来。
For each element, if the function returns true (or a "truthy" value), the element will be included in the filtered set; otherwise, it will be excluded.
另外，下面给出的例子中，“length”出来的也是数字呀。
http://api.jquery.com/filter/#filter-selector
$( "li" )
  .filter(function( index ) {
    return $( "strong", this ).length === 1;
  })
    .css( "background-color", "red" );

【在 Balancer 的大作中提到: 】
: jquery是操作dom节点的，你让他对一个字符串执行css，能有什么效果
:
--
FROM 114.165.107.*
9楼|cowell|2015-06-21 21:55:54|展开
嗯，把代码简化如下了。
原意是点击右边表格的行（有3行），高亮左边的td的title里含有被点击行中间那个td内容的td （有点绕，不知道能看明白不 :)）
现在只要点击右边表格任意行，正常工作的话A1会被高亮的。但为何不工作？

<!DOCTYPE html>
<html>
<head>
</head>
<script src="jquery.min.js"> </script>
<script>
$(document).ready(function(){
    $('.funcBlkTbl tr').click(function(){
        $('.pName1 td').filter(function(){
            var t = $(this).attr("title");
            return t.substring(t.lastIndexOf("Key String = ")).indexOf("Test")>=0; //Issue here: Why does not work?
            //return true; //If use this line instead, every cell in .pName table would change background color.
        })
        .css("background-color","#FF0");
    });

    $('.funcBlkTbl tr:even').css('background-color','#ddd');
    $('.funcBlkTbl tr:odd').css('background-color','#6FF');
    //// Below for test only, using tr(2)td(2)
    var tt = $('.pName1 tr:nth-child(2) td:nth-child(2)').attr("title");
    tt = tt.substring(tt.lastIndexOf("Key String = "));
    $('#test1').text(tt);
    ss = tt.substring(tt.lastIndexOf("Key String = ")).indexOf("Test");
    $('#test2').text(ss);
});

</script>

<body>

<table>
<tr>
<td style="vertical-align:top">
<table class="pName1" border=1>
    <tr height=15>
        <td width=15></td>
        <td width=15><font face=Verdana size=1>A</font></td>
        <td width=15><font face=Verdana size=1>B</font></td>
        <td width=15><font face=Verdana size=1>C</font></td>
        <td width=15><font face=Verdana size=1>D</font></td>
        <td width=15><font face=Verdana size=1>E</font></td>
    </tr>
    <tr height=15>
        <td width=15>
        <font face=Verdana size=1>
        1
        </font>
        </td>
        <td style="background-color:green" title="Key String = Test me"></td>
        <td></td>
        <td style="background-color:green" title="Name # = C1
        Item Name = DAISY_CHAIN_NCTF_C1
        Net List = DC_TEST_B2_C1
        Key String = Test Name1"></td>
        <td style="background-color:green" title="Name # = D1
        Item Name = RSVD
        Net List = TD_CATHODE
        Key String = TD"></td>
        <td></td>
    </tr>
    <tr height=15 width=15>
        <td>
        <font face=Verdana size=1>
        1
        </font>
        </td>
        <td></td>
        <td></td>
        <td style="background-color:green" title="Name # = E1
        Item Name = RSVD
        Net List = TD_ANODE
        Key String = TD"></td>
        <td></td>
        <td style="background-color:green" title="Name # = F1
        Item Name = I2C1_SCL / GPIO7
        Net List = GP7_I2C1_SCL
        Key String = Test Name2"></td>
    </tr>
</table>
</td>

<td style="vertical-align:top">
    <div class="funcBlkDiv" style="vertical-align:top">
        <table class="funcBlkTbl" bord=1 cellspacing=0 cellpadding=8px>
        <tbody>
            <tr>
                <td><font face=Verdana size=1>1</font></td>
                <td><font face=Verdana size=1>Test Name1</font></td>
                <td><font face=Verdana size=1 align=center>9</font></td>
            </tr>
            <tr>
                <td><font face=Verdana size=1>2</font></td>
                <td><font face=Verdana size=1>TD</font></td>
                <td><font face=Verdana size=1 align=center>1</font></td>
            </tr>
            <tr>
                <td><font face=Verdana size=1>3</font></td>
                <td><font face=Verdana size=1>Test Name2</font></td>
                <td><font face=Verdana size=1 align=center>1</font></td>
            </tr>
        </tbody>
        </table>
    </table>
    </div>
</td></tr>
</table>
<br />
<br />
<br />
Below is result for test, using "A1" cell:
<div id=test1></div>
<div id=test2></div>

</body>
</html>

【在 ottffsse 的大作中提到: 】
: 你得把html也给出来才好判断
:
--
FROM 114.165.107.*
13楼|cowell|2015-06-22 07:15:07|展开
你的理解都不对。我是想高亮含关键字的td的底色（background-color）。<td></td>的内容都是空的，关键字等信息在td的title里边设定，没法高亮关键字的。

另外，不要在string.css上纠结了，我觉得你是没仔细看代码。我没有对string做css的处理。
filter那句简化后如下：
         $('.pName1 td').filter(function(){
             ...(函数内容 )
         })
         .css("background-color","#FF0");
可以看出，css还是作用在td上的。

我刚才在公司的IE和Chrome上试了一下，发现代码是工作的。看来是我家里MacBook里的Chrome里的问题了，不知道为何。 :(

【在 jamesjx 的大作中提到: 】
: 你是想加亮含有关键字的整个串，还是只加亮关键字？看你意思是后者？
: 如果这样的话，要单独写逻辑。如果有特定的字串，你就得把整个串拆开成多个节点，关键字串做单独的节点才能施加样式，懂吗？
: 比如说,你原来有
: ...................
--
FROM 192.55.54.*
14楼|cowell|2015-06-22 07:19:39|展开
嗯，多谢。
可能跟jQuery的版本有关，但应该跟attr没关系，因为"Below for test only..."那行下面那部分测试可以看出用attr提取出来的内容是可以显示出来的。
我刚才在公司的Windows中的IE/Chrome上试了下，发现代码是工作的，但jquery版本比家里的MacBook里的要低。等回家后再试试看。

【在 ottffsse 的大作中提到: 】
: http://api.jquery.com/attr/
: As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set.
: so your code will go wrong. change your code as follows:
: ...................
--
FROM 192.55.54.*