jquery를 사용하여 헤드 라인의 전반부에 클래스를 래핑하는 방법은 무엇입니까?

jQuery를 사용하여 더 역동적이고 멋진 헤드 라인을 만들 수 있도록 제목의 첫 번째 또는 두 번째 절반 주위에 클래스를 래핑하려고합니다.jquery를 사용하여 헤드 라인의 전반부에 클래스를 래핑하는 방법은 무엇입니까?

이론적으로 문장의 모든 공백을 찾아서 두 개로 나누고 싶습니다. 제목에 고르지 못한 단어가 포함되어 있으면 스크립트가이를 감지하고 가장 가까운 단어에 클래스를 추가해야합니다. http://images.homey.se/dynamic_headline.png

출처

2011-03-01 Tony Bolero

멋진 @lashleigh.

http://jsfiddle.net/johnhunter/KRJdm/

@Tony, 내가 구현 한 당신이 jQuery 플러그인으로 후 무엇을 : 현재 작업 예제를 살펴 수 있습니다. 당신은 당신이 포맷 원하는 헤더에 전화 :

$(function() { 
    $('h1').splitWords(); 
});

... 그리고이 같은 HTML 출력을 생성합니다 : 후

<h1>This is a long headline</h1>

전을

<h1> <span class="wrap-1">This is </span> <span class="wrap-2">a long headline </span> </h1>

업데이트 됨 :

원래 질문에 포함되지 않았지만 예제를 수정하여 줄 바꿈이 발생하는 단어를 지정할 수있게했습니다.색인 인수를 제공하면 단어 목록에서 해당 오프셋을 사용합니다 (끝에서 뺀 값을 뺀 값). 예컨대 :

$('h1.a').splitWords(); // Split these words equally $('h1.b').splitWords(1); // Split these after the first word $('h1.c').splitWords(-2); // Split these after the second last word

http://jsfiddle.net/johnhunter/KRJdm/

출처

2011-03-01 08:57:12 johnhunter

제 의견으로, 플러그인은 엄청난 과잉입니다. :-) – Benson

@Benson 그것의 공정한 점. 아마도 jquery는 한 기능의 기능을 과도하게 사용합니다. 플러그인 자체는 어쨌든 사용하는 코드를 래핑하는 기능 일 뿐이지 만 재사용하기 쉽습니다. 당신이 원한다면 그것을 뜯어 낼 자유롭게 해주십시오. – johnhunter

추신 : 플러그인은 20 줄입니다 - 빈 것들을 포함합니다 : D – johnhunter

이 흥미로운 문제는 다음과 같습니다

는 명확한 설명은 이미지를 참조하십시오. 나는 편리한 자바 스크립트 splice 메소드로 접근 할 것이다. 스플 라이스를 사용하여 배열의 항목을 삽입하고 삭제할 수 있습니다. 나는 감찰관을 열고 아래에 쓴 몇 가지 예제를 시도해 보길 권한다.

먼저 jQuery를 사용하여 헤더를 선택한 다음 html 콘텐츠 문자열을 조작합니다. 난 당신이 조작 할 특정 헤더가 클래스있을 것이라는 점을 가정 그리고 난 '동적'대체했습니다 스플 라이스는 원래의 배열을 변경하는 것이

var header = $("h1.dynamic").text(); 
    => "Header with some other stuff" 
var header_as_array = header.split(" ") 
    => ["Header", "with", "some", "other", "stuff"] 
var first_half = header_as_array.splice(0, header_as_array.length/2)

명심하십시오,이 시점에서 너무 :

first_half = ["Header", "with"] 
header_as_array = ["some", "other", "stuff"]

지금, 당신은 다시 함께 가입 할 수 있으며과 같이 스팬로 포장 :

var first = '<span class="first_half">'+first_half.join(" ")+'</span>'; 
var second = '<span class="second_half">'+header_as_array.join(" ")+'</span>'; 

var finished = first+" "+second;

마지막으로, 우리는 jQuery로 헤더로 다시 우리의 완성 된 문자열을 놓을 게요 :

$("h1.dynamic").html(finished);

필자가 작성한 방식으로 홀수 개의 단어가있는 머리글은 항상 후반부가 더 긴 절반으로 표시됩니다. 당신은 당신이 할 수있는 주위에 다른 방법으로 선호하는 경우가 아닌 정수 값이 잘립니다 기본적으로

var splice_location = Math.ceil(test_as_array.length/2); 
var first_half = header_as_array.splice(0, splice_location);

을, 그러나 여기에서 우리는 아래로 대신 물건을 모아 천장 기능을 사용하고 있습니다.

출처

2011-03-01 08:50:45 lashleigh

와우, 어떤 서비스인가. 2 시간 전에 질문을했고이 멋진 도움을 얻었습니다. 감사합니다! –

문제 없습니다. 정말 도움이 되었기 때문에 기쁩니다. 첫 번째 질문이었습니다. 감사의 말을하는 가장 좋은 방법은 답변을 '수락'으로 표시하는 것인데, 이것은 답변자 보너스 포인트를 제공하고 좋은 카르마를 생성합니다. 나는 SO 커뮤니티가 당신을 잘 대하기를 바랍니다. – lashleigh

아, 여기 아주 바보입니다. 나는 존 첸터의 답변을 받아 들였지만, 나는 물건을 설명하는 당신의 방식을 정말로 높이 평가했다. 나는 15p에 이르렀을 때 나는 당신의 대답에 대해서도 투표하고 투표 할 것이라고 약속한다. 그 점에 대한 점수를 얻었나? –

그러나, 나는 jQuery를이 효과를 달성하기위한 기술의 최선의 선택임을 전제에 도전 할 다음

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var headlineText = $('h1.mainHeader').text(); 
      var headlineWords = headlineText.split(' '); 
      var headlineLength = headlineWords.length; 
      var headlineMidPoint = (headlineLength/2) + 1; 

      var headlineFirstHalfText = headlineWords.slice(0, headlineMidPoint).join(' ') + ' '; 
      var headlineSecondHalfText = headlineWords.slice(headlineMidPoint).join(' '); 

      var d = document; 
      var headlineFirstHalf = $(d.createElement('span')).addClass('headlineHead').text(headlineFirstHalfText); 
      var headlineSecondHalf = $(d.createElement('span')).addClass('headlineTail').text(headlineSecondHalfText); 
      var headline = $(d.createElement('h1')).addClass('mainHeader').append(headlineFirstHalf).append(headlineSecondHalf); 

      $('h1.mainheader').replaceWith(headline); 
     }); 
    </script> 
    <style type="text/css"> 
     h1 { font-size:18px;} 
     span.headlineTail {font-size:1.2em;} 
    </style> 
</head> 
<body> 
<h1 class="mainHeader">This is a dynamic headline</h1> 
<p>Lorem ipsum dolor sit amet, consectetur...</p> 
</body> 
</html>

출처

2011-03-01 09:03:37

소년, 그게 많은 코드입니다. 제 생각에는 createElement와 addClass의 사용은 이미 문자열 조작을 할 때 일종의 과잉이라고 생각합니다. 그리고 꽤 쉽게 을 던질 수 있습니다. – Benson

-1

lashleigh의 대답은 중대하다보십시오. 동일한 서버 측을 제안하는 경향이 있습니다. PHP, Python 또는 사용중인 언어를 사용하여 마크 업을 표현한 다음 삽입 된 클래스로 출력을 캐싱합니다. 페이지 가중치를 저장하고 각 페이지가로드 될 때 사용자의 브라우저가 모든 것을 계산할 필요가 없다는 것을 의미합니다. 모바일 장치와 같은 가벼운 클라이언트에 대한 중요한 이점.

다음은 PHP의 예입니다.

<?php 
     $headline = "This is a headline of epic proportions"; 
     $split = explode(' ', $headline); 
     $a = array_slice($split, 0, (count($split)/2)); 
     $b = array_slice($split, (count($split)/2)); 
     $headline = '<span class="whatever">'. join(' ', $a) . '</span>' . join(' ', $b); 
     print $headline; 
?>

출처

2011-03-01 09:05:59 Prydie

물론입니다! ... 당신이 그것을 구현할 입장에 있다면. – johnhunter

흥미로운 생각이지만 모바일 장치에서도 밀리 초 미만으로 소요되는 사소한 작업입니다. 귀하의 주장은 조숙 한 최적화의 경우처럼 들립니다. 서버에서이 작업을 수행 할 수있는 유일한 이유는 변수에 이미 헤더 텍스트가있는 것입니다. 그렇다면 유지할 코드가 적어지기 때문에 그럴 가치가 있습니다. – Benson

@ Benson 코드의 유지 관리 가능성에 대한 귀하의 요점이 마음에 들지만 조기에 나타납니다. 그러나 나는 너무 많은 시간이나 금전적 인 투자가 발생하지 않는 한 업무를 성취하기위한 올바른 기술을 선택해야한다고 주장 할 것이다. 사이트가 정적 html이 아니라고 가정하면 백엔드에서 이러한 종류의 서식을 삽입하는 것은 간단합니다. 아마 자바 스크립트보다 단순한 코드 일 겁니다._ PHP가 내 게시물에 추가되었습니다 _ – Prydie

jquery를 사용하여 헤드 라인의 전반부에 클래스를 래핑하는 방법은 무엇입니까?

답변

관련 문제