다른 요소가 없으면 JQuery에서 요소를 선택하는 우아한 방법이 있습니까?

Question

다음 요구 사항이 있다고 가정합니다. 요소가 존재하는 경우 "x" 요소가있는 요소에 e 요소를 추가하고, 그렇지 않으면 e을 본문에 추가하십시오.

DOM 레벨 0에서

, 내가 쓸 수 있습니다 : jQuery를에

var parent = document.getElementById("x") || document.body; 
parent.appendChild(e); 

을, 다음을 수행 하지 일 :

var parent = $("#x") || $("body"); 
parent.append(e); 

때문에 경우 ID x이 존재 아무 요소하지, 분리 된 첫 번째 빈 jquery 객체를 반환합니다. 거짓이 아닌 진위가 있으므로 append은 아무 작업도 수행하지 않습니다. 나는 그러나 작성할 수 있습니다

var parent = $("#x")[0] || $("body")[0]; 
parent.appendChild(e); 

하지만 jQuery 오브젝트를 색인하는 HTMLElements 날 다시 얻을 수 있기 때문에이 솔루션은 다소 투박, 그래서 appendChild 대신 append 사용해야합니다. 이것이 작동하는 동안, 나는이 수준의 혼합이 적절하지 않거나 나쁜 설계를 나타낼 지 궁금합니다.

사용 방법이있을 수 있습니다. first()? 아마도 첫 번째 요소가 id x 인 div이고 두 번째 요소가 본문 인 배열 인 jQuery 객체를 만들 수 있습니다. 요소 배열을 사용하는 jQuery 생성자 폼을 사용하여이 작업을 수행 할 수 있다는 것을 알았지 만, 다시 혼합 수준으로 돌아 왔습니다. 나는 또한 id x ($("#x").length)를 가진 요소의 존재를 검사하는 방법을 안다.하지만 이것은 "id x가있는 요소라면, 그렇지 않으면 본문"이라는 문구를 우아한 방법으로 유도 할 수있는 방법을 알 수 없다.

그러한 제형은 존재합니까?

var parent = $('#x'); 
if(parent.length == 0) parent = $('body'); 

을 그리고 그 의도는 매우 분명하다

Answer 1

대신의 요소를 선택하기 위해 jQuery를 사용하여, 당신은 포장하는 데 사용할 수 있습니다

또한

, 여기에 전용 (가 가독성에 트레이드 오프 비록)를 한 번 각 쿼리를 발생 삼항 양식의 기본 DOM 호출 :

$(document.getElementById("foo") || document.body) 

그것은 정확히 우아한 (또는 정말 심지어 jQuery를 사용하여),도 보편적으로 적용 가능한 기술을 아니지만, 당신은 당신이에 추가 할 수있는 무언가와 끝까지 (단지 상대적으로 저렴한 jQuery를 호출이 발생할 수 있습니다 한 번).

당신은 사용할 수 없습니다 first() - 예를 들어, $("#foo, body").first(); - 그것은 요소를 선택 반환되는 순서는 DOM 순서를 기반으로하기 때문에, 순서를 선택하지 (감사, @muistooshort) 또한 수

Answer 2

는 솔직히, 난 정말이 심히 자세한 생각하지 않습니다. 이 관용구가 많이 나오면 함수로 감쌀 수도 있습니다.

var parent = (x = $('#header')).length ? x : $('body');