jquery를 통한 DOM 탐색

Question

저는 jquery에 newbee이고 내 작업에서 jquery를 완성하기 위해 나에게 할당 된 작업이 있습니다. Test1Value

Test2를 : Test2Value 를 .....

Test10을 내가

Test1을 같은 값을 가져 얻기 위해 jQuery를 사용할 필요가 이제

<bl id="delme"> 
<bt class="abst">Test1:</bt> 
<bb>Test1Value</bb> 
<bt class="abst">Test2</bt> 
<bb>Test2Value</bb> 
<bt class="abst">Test3</bt> 
<bb>Test3Value</bb>? 
<bt class="abst">Test4</bt> 
<bb>Test4Value</bb> 
<bt class="abst">Test5</bt> 
<bb>Test5Value</bb>? 
<bt class="abst">Test6</bt> 
<bb>Test6Value</bb> 
<bt class="abst">Test7</bt> 
<bb>Test7Value</bb> 
<bt class="abst">Test8</bt> 
<bb>Test8Value</bb>? 
<bt class="abst">Test9</bt> 
<bb>Test9Value</bb> 
<bt class="abst">Test10</bt> 
<bb>Test10Value</bb> 
</bl> 

을 다음과 같이 나는 HTML DOM이있다 : Test10Value

어떻게해야합니까?

모든 클래스가 같은 이름이므로 클래스를 통해 쿼리 할 수 ​​없습니다. 그렇게 할 다른 옵션이 있습니까? 이 검증되지 않은 비록

Answer 1

나는 다음과 같은 일을해야한다는, 첫번째 생각에 생각 :

var values = {}; 

$('bt.abst').each(
    function(){ 
     values[$(this).text()] = $(this).next('bb').text(); 
    }); 

JS Fiddle demo을, 데모 (dt 및 dd 요소와 더불어, dl) 실제 마크를 사용이기는하지만.

Answer 2

다음 jQuery를 사용하여 이후의 형식을 갖는 문자열 배열을 만들 수 있습니다.

var valueArray = $('#delme bt').map(function() { 
    return $(this).text().replace(/^(.*):$/, '$1') + ': ' + $(this).next('bb').text(); 
}); 

지금 당신은 하나의 문자열을 만들 수 .join()을 사용하는 것과 당신이 좋아하지만 문자열의 배열을 조작 할 수 있습니다.

편집 : .map() 함수 내부 본선 설명 :

즉 $(this).text().replace(/^(.*):$/, '$1') + ': ' + $(this).next('bb').text();

이 줄 원하는 형식으로 연결된 문자열을 생성한다. 두 까다로운 구성 요소를 분해하자 (무시 ': ') :

1. $(this).text().replace(/^(.*):$/, '$1') :이 매핑 루프에서 현재 <bt> 요소 ($(this).text())의 텍스트 내용을 가져온 다음에 어떤 :을 제거하는 정규 표현식을 사용합니다 끝. 샘플 HTML에서 첫 번째 항목의 텍스트가 "Test1 :"이고 나머지는 콜론이 없기 때문에이 작업을 수행했습니다. 이런 방식으로 스트립 핑함으로써 일관된 출력을 보장합니다 (그렇지 않으면 첫 번째 문자열은 "Test1 :: Test1Value"였을 것입니다).
2. $(this).next('bb').text() : 이것은 <bb> 요소 인 DOM의 현재 <bt> 다음 요소의 텍스트를 가져옵니다.

내가 더 알고 싶다면 알려주세요. :-)

이

Answer 3

당신은 이런 식으로 작업을 수행 할 수 있습니다

이

var results = {}; 
$("#delme bt").each() { 
    var self = $(this); 
    results[self.text()] = self.next().text(); 
} 
// results object contains bt text as keys, bb text as values 
// results["Test1:"] == "Test1Value" 

이 그 BT 각각 #delme 객체 내부에 도착, 다음에서 텍스트를 추출하고, 그 다음 DOM 객체를 가져옵니다 (있을 것이다 해당 bb 객체), 그 텍스트를 가져 와서 결과 객체에 다시 할당합니다.당신이 객체 대신 BT와 BB 값을 교대로 배열에 결과를 원한다면

, 즉는 다음과 같이 할 수있다 :

var results = []; 
$("#delme bt").each() { 
    var self = $(this); 
    results.push(self.text()) 
    results.push(self.next().text()); 
} 
// results array contains alternating bt and bb values 
// results[0] == "Test1:" 
// results[1] == "Test1Value" 

Answer 4

잘 모르겠어요이 갈 수있는 올바른 방법 인 경우 이것에 대해서 ...

내 div 내에서 여러 클래스를 사용하는 경향이 있습니다. 즉, 요소를 그룹화하는 클래스를 작성한 다음 단일 요소를 식별하는 또 다른 클래스를 작성합니다. 단순히 ID를 부여 할 수도 있습니다.

만들 수있는 클래스 수에는 제한이 없습니다. 나는 장소의 모든 곳에서 클래스를 식별자로 사용한다. 이 작업을 수행하는 다른 방법이 있습니까? 나는 확신한다, 그러나이 방법은 잘 작동한다.

사실, 아마도이 글을 조금 씁니다.

<div class="abst test1"> 
<div class="abstTitle">Test1:</div> 
<div class="abstValue">Test1Value</div> 
</div> 

var test1Title = $('.test1 > .abstTitle').html(); 
var test1Value = $('.test1 > .abstVal').html(); 

idunno ...