문자열을 포함하고 형제 요소를 대체하는 요소를 찾음

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 속성에 특정 값을 사용하여 선택하는 것입니다. 내 자바 스크립트 결과는 다음과 같습니다.

$(".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)과 일치 요소들만을 보유한다;

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

JS Fiddle demo : 단순히 이 그 문자열을 포함하는 자들을 유지하기 위해 당신은 filter()에 개정 할 수 중 하나.

또는 :

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

JS Fiddle demo.

참고 :

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