条件 jquery 元素选择答案

【问题标题】：Conditional jquery element selection条件 jquery 元素选择
【发布时间】：2015-01-30 04:35:37
【问题描述】：

我有一张桌子：

<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>

我想只选择其中包含 url 的 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"){....

【问题讨论】：

Jquery select all elements with an innerHTML that starts with a string? 的可能重复项
您可以使用:contains，但这并不能完全满足您的需求，因为它会搜索整个字符串。
网址的格式会不会一致？总是以“http”开头？还是需要匹配更复杂的 URL 模式？
是 - 始终以“http”开头

标签： javascript jquery

【解决方案1】：

违背斯特赖纳在 cmets 中所说的话：: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>

【讨论】：

【解决方案2】：

可能过滤 TD。

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

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

【讨论】：

【解决方案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/

【讨论】：