jQuery의 $ (). 각 () 프레젠테이션에 대한 실제 용도

StackOverflow https://stackoverflow.com/questions/863166

  •  21-08-2019
  •  | 
  •  

문제

나는 오늘 일부 동료들에게 Coldfusion과 함께 jQuery를 사용하는 방법에 대해 프레젠테이션을하고 있습니다. 이것은 고급 세션보다 jQuery에 대한 소개입니다. 나는 jQuery의 $ ()를 사용하여 어떻게 루프 할 수 있는지 보여 주려고 노력하고 있으며, 각 () 메소드를 사용하고 실용적이고 실제적인 예제를 생각해 내려고 노력하면 공백을 그렸습니다. 제안이 있습니까?

도움이 되었습니까?

해결책 

// changes every other div green
$("div").each(function(i) { if (i % 2) this.style.backgroundColor = "green"; });

다른 팁

그냥 넘어가. 어쨌든 새로운 사용자에게 혼란 스러울 것입니다. jQuery는 객체의 배열을 반환하고 이미 각각에 함수 호출을 적용합니다. 이는 멍청이에게는 분명하지 않습니다. 당신은 각각 ()에 시간을 보내고 당신이 그것을 얻을 수있는 것은 사람들입니다. $('a').each().css("color", "red"); 또는 $('a').each(function(){ $(this).css("color", "red");});

내가 멍청이가 만나는 것을 어떻게 알고 있는지 묻지 마십시오 .Each () 가이 실수를 할 수 있습니다.

외부 확인란의 값을 기반으로 데이터 그라이드에서 모든 확인란을 확인하십시오.

$('#<%=dgMyDataGrid.ClientID %> :checkbox').each(function(i)
{
this.checked = $(#SelectAll).is(":checked")
});

나는 원래 #selectall 대신 FindControl () 메소드 뒤에 코드가 있었지만, 내가하려는 일을 희망적으로 보여줍니다. 이 기능은 #SelectAll의 클릭 이벤트에도 구속되었습니다.

(또한 내가 jQuery 초보자라는 점에 유의하십시오!)

편집 : 내가 이것을 사용한 것의 전체 구현은 IS 여기 누구든지 관심이 있다면 :)

jQuery에서 각 ()의 사용

매우 간단한 '더/적은'확장 가능한 신문 칼럼 코드에서 내 시도를 볼 수 있습니다. 다음은 각 () 함수를 사용하는 코드입니다. 나는 간단하게 유지하기 위해 노력했다 - 비 카운터, var에 보관하지 않고 색인을 사용하지 않는다. 여기에 코드가있다.

내 웹 사이트에서 살아있는 데모 및 소스 코드를 참조하십시오 여기 Manisa Turiksh에서

JQ 코드


$(document).ready(function(){
$(".expand").each(function() {
$('p', this).hide(); //hide all p's for each div class=expand
$('p:first', this).show(); //show only first p in each div
$('.more',this).show(); //show more link belw each div
});

$('.more').toggle( 
    function() { 
    $(this).prevAll().show(); // toggle on to show all p's in div id=expand selected by this id=more
    $(this).html('less..'); //change legend to - less - for this id=more when div is expanded
    }, 
    function() {
    $(this).prevAll().not('p:last,h3').hide(); //hide all p's except first p, counts backwards in prevAll and reshow header h3 as it was hidden with prevAll
    $(this).html('more..'); //change legend to - more - for this id=more when div is collapsed
    });
});

CSS 코드



body {font-family:calandra;font-size:10px;}
.expand {width:17%;margin-right:2%;float:left;} /*set div's as newspaper columns */
p {display:block;} /*always display p's when JS is disabled */
.more{color:red;display:none;} /*never display a's when JS is disabled */

일부 HTML 코드


<div class="expand">

<h3>Headine 1</h3>

<p>1.A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view.</p>

<p>2. Each paragraph builds on what came before and lays the ground for what comes next. Paragraphs generally range three to seven sentences all combined in a single paragraphed statement. In prose fiction successive details, for example; but it is just as common for the point of a prose paragraph to occur in the middle or the end.</p>

<p>3 A paragraph can be as short as one word or run the length of multiple pages, and may consist of one or many sentences. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.11</p>

<p>4 The last paragraph</p>

<a  href="#" class="more">more</a>

</div>





<div class="expand">

<h3>Headine 2</h3>

<p>Amet vestibulum. Nisl a, a eros ut, nec vivamus. Tortor nullam id, metus ut pretium. Amet sociis. Ut justo. Amet a est, dolor integer, purus auctor pretium.</p>

<p>Libero sapien sed, nulla nullam. Porta tincidunt. Suspendisse ante ac, eget fermentum vivamus. Ipsum sapien placerat. Adipiscing lorem magna, urna tortor dictum.</p>

<p>Fringilla a morbi, sed sollicitudin magna. Justo et in, sem aenean, molestie integer tincidunt. Magna quo, erat odio. Posuere enim phasellus, dui pede. Sit a mauris, metus suscipit.</p>

<p>Lobortis et, pellentesque nec, suspendisse elit quisque. Justo vestibulum debitis, augue fermentum. Orci et id. Ut elit, tortor ut at. Eum et non, faucibus integer nam, ac ultrices augue.</p>

<p>Ultricies magnis, velit turpis. Justo sit, urna cras primis, semper libero quam. Lectus ut aliquam. Consequat sed wisi, enim nostrud, eleifend egestas metus. Vestibulum tristique. Et erat lorem, erat sit.</p>

<p>Aliquam duis mi, morbi nisl. Rhoncus imperdiet pede. Sit et. Elit fusce, feugiat accumsan incididunt. Nec ipsum feugiat, accumsan dictum massa. Nec sit.22</p>

<a  href="#" class="more">more</a>

</div>

각 ()를 사용하여 최대한 간단하게 유지하려고 노력했습니다.
존 거부

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top