找到包含字符串的元素并替换同级元素

Question

所以，我有一个网站，我只有类来处理隔离我想编辑的元素。我需要找到一个在html中包含特定字符串的元素，并替换它的一个兄弟html。不管怎么说，这里是我得到的代码：

if((".user.info").html().indexOf(vaUID[index]) >= 0) { 
    $("a.user.info").each(function (index2, obj) { 
     if($(this).html().indexOf(vaUID[index]) >= 0) { 
      $(this).siblings('.registered').html('<div class="registered"><a href=http://www.twitch.tv/'+users[index]+ '>currently streaming' + data.stream.game + '</a></div>'); 
     } 
    }); 
} 

这里的起始HTML：

<div class="user first"> 
    <div class="element_avatar simple small "><a href="http://www.cnr-clan.com/profile/xxxxxx" data-minitooltip="username"><img src="http://assets-cloud.enjin.com/users/xxxxxx/avatar/small.xxxxxx.png"></a></div> 
    <div class="info"> 
     <a href="http://www.cnr-clan.com/profile/xxxxxx" class="element_username tag-xxxxxx">username</a> 
     <span class="nameicons"> 
      <!--Irrelevant Excess Code--> 
     </span> 
     <div class="registered">currently browsing</div> 
    </div> 
    <div class="clearing"><!-- --></div> 
</div> 

我想结束了什么：

<div class="user first"> 
    <div class="element_avatar simple small "><a href="http://www.cnr-clan.com/profile/xxxxxx" data-minitooltip="username"><img src="http://assets-cloud.enjin.com/users/2219573/avatar/small.xxxxxx.png"></a></div> 
    <div class="info"> 
     <a href="http://www.cnr-clan.com/profile/xxxxxx" class="element_username tag-xxxxxx">username</a> 
     <span class="nameicons"> 
      <!--Irrelevant Excess Code--> 
     </span> 
     <div class="registered"><a href='http://www.twitch.tv/username'>currently streaming gamename</a></div> 
    </div> 
    <div class="clearing"><!-- --></div> 
</div> 

请记住，我有几个这样的代码块与同一个类。 vaUID [index]的示例值将是xxxxxx。

Answer 1

我发现一个更简单的方法只是选择使用href属性的特定值。这是我得到的javascript：

$(".user .info a[href='http://www.cnr-clan.com/profile/" + vaUID[index] + "']").siblings('div.registered') 
.html('<a href="http://www.twitch.tv/username/' + users[index] + '">streaming ' + data.stream.game + '</a>'); 

Answer 2

我建议，基于该HTML：

// selects the appropriate elements: 
$('.user .info a.element_username') 
    // filters that collection: 
    .filter(function(){ 
     // retains only those in which this assessment results as true/truthy 
     return $.trim($(this).text()) === 'username'; 
    }) 
    // searches amongst those retained-elements' sibling for those that match 
    // the passed-selector: 
    .siblings('div.registered') 
    // wraps the contents of those elements with the supplied HTML: 
    .wrapInner('<a href="http://www.twitch.tv/username"></a>'); 

JS Fiddle demo。

上述filter()条件将只保留其文本的内容精确的'username'串（demo to highlight that problem）匹配的那些元件;留住那些仅仅包含这个字符串，你可以任意修改filter()到：

return $(this).text().indexOf('username') > -1; // this is case-sensitive 

JS Fiddle demo。

或者：

return $(this).text().toLowerCase().indexOf('username') > -1; // this is case-insensitive 

JS Fiddle demo。

参考文献：

• filter()。
• jQuery.trim()。
• siblings()。
• text()。
• wrapInner()。