Question

我有一张桌子：

<table id="codexpl">
<tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
</tr>
<tr>
    <td>1</td>
    <td>This</td>
    <td>http://stackoverflow.com/</td>
    <td>Is</td>
</tr>
<tr>
    <td>2</td>
    <td>Coloumn</td>
    <td>two</td>
    <td>this</td>
</tr>
<tr>
    <td>3</td>
    <td>http://stackoverflow.com/</td>
    <td>not equals</td>
    <td>a</td>
</tr>
<tr>
    <td>4</td>
    <td>the</td>
    <td>Column</td>
    <td>real</td>
</tr>
<tr>
    <td>5</td>
    <td>first</td>
    <td>One</td>
    <td>Coloumn</td>
</tr>

我想只选择其中包含网址的tds并使用

更改其内容

   $("td").each(function(){
          $('<div class="box"><iframe src="' + this.href + '" width = "500px" height = "500px"></iframe></div>').insertAfter(this);
         });

我在使用看起来像这样的jquery之前选择了它们：

$('td').hover( function() {
          var contents = $( this ).html() ;
           if (contents.match("^http")) {

我想知道你是否做了类似伪代码的事情：

 $('td' WHERE innerhtml=="^http"){....

Answer 1

过滤TD可能。

$("TD").filter(function(el) {
  return $(el).text().indexOf("http") !== -1;
});

找到链接的方式并不是最复杂的，你可以想象更好，比如regexp等。

Answer 2

关闭Stryner在评论中所说的内容：:contains()

这样的事情？（另请注意，如果你将div插入tds，它不是html友好的）

$(document).ready(function() {
    $('td:contains(http)').each(function() {
        $(this).html('THIS WAS A LINK');
    });
});

td {
    padding: 10px;
    border: 1px solid lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="codexpl">
<tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
</tr>
<tr>
    <td>1</td>
    <td>This</td>
    <td>http://stackoverflow.com/</td>
    <td>Is</td>
</tr>
<tr>
    <td>2</td>
    <td>Coloumn</td>
    <td>two</td>
    <td>this</td>
</tr>
<tr>
    <td>3</td>
    <td>http://stackoverasdfasdfflow.com/</td>
    <td>not equals</td>
    <td>a</td>
</tr>
<tr>
    <td>4</td>
    <td>the</td>
    <td>Column</td>
    <td>real</td>
</tr>
<tr>
    <td>5</td>
    <td>first</td>
    <td>One</td>
    <td>Coloumn</td>
</tr>

Answer 3

使用jQuery过滤器可以最小化所选元素，而不仅仅是迭代匹配结果。

$("td").filter(function(idx) {
  return $(this).text().indexOf("http") !== -1;
}).each(function(){

    var contents = $(this).html() ;
    $('<div class="box"><iframe src="' + contents + '" width = "500px" height = "200px"></iframe></div>').appendTo($(this));
});

请参阅此处的工作示例：http://fiddle.jshell.net/3w10tfou/1/

条件jquery元素选择

3 个答案: