1

jqueryでポイントに行き詰まりました。同じ構造を持ついくつかの div をループする必要があり、<h1>タグ内のテキスト<li>とクラス '.checked' を持つすべてのテキストが必要です。

<div id="a21315" class="content gradient">
<div class='header gradient'>
    <div class='headimg'></div>
    <h1>Input Shaft Size</h1>
    <div class="minus_sprite "></div>
    <ul class="de-radio ">
        <li id="a22134340"><span class='checked'>0.4375" X 0.88"</li>
        <li id="a22151870"><span class=''>0.500" X 1.13"</li>
        <li id="a22168545"><span class=''>0.625" X 1.50"</li>
        <li id="a22172070"><span class=''>0.625" X 1.57"</li>
        <li id="a22184915"><span class=''>0.750" X 1.57"</li>
        <li id="a22946970"><span class=''>0.875" X 1.97"</li>
    </ul>
</div>

このような結果が期待され、これを別の div (#overview) にコピーしたいと考えています。

Text from Headline 1
-List Element with checked Class 1
-List Element with checked Class 2
-List Element with checked Class 3

Text from Headline 2
-List Element with checked Class 1
-List Element with checked Class 2
-List Element with checked Class 3
etc.

これ$('.content.gradient:not(.hidden) h1').text();で、すべての Headline() を受け取り、次の行で: $('.content.gradient:not(.hidden) ul li.checked span').not('.hidden').text();

<li>.checked クラスで選択したものをすべて受け取りました。しかし、どうすればこれらすべてをループして取得できますか?

私の問題を分かりやすく説明していただければ幸いです。

4

2 に答える 2

0

しかし、どうすればこれらすべてをループできますか

あなたがすることができます：

var $overview = $('#overview');
$('.content.gradient:not(.hidden)').find('.header.gradient').each(function(){
    var headingText = $(this).find('h1').text();
    var $checkedItems = $(this).find('span.checked').not('.hidden');
    var checkedItemsText = '';
    $checkedItems.each(function(){
        checkedItemsText += $(this).text() + '<br/>';
    });
    $overview.append(headingText + '<br/>' + checkedItemsText );
});

編集：

申し訳ありませんが、いくつかのタイプミスがありました - 上記は正しいものになりました。これが実際のデモです。

編集2：

パフォーマンスを向上#overviewさせるには、上記のコードを更新してキャッシュすることをお勧めします。

于 2012-11-16T15:41:39.770 に答える
0

行の書き方の単純な間違い:

$('.content.gradient:not(.hidden) ul li .checked').not('.hidden').text()

LI にチェック済みのクラスがないため、内部のスパンだけに、li とクラスセレクターの間にスペースが必要でした。

また、SPAN タグを閉じる必要があります。

<ul class="de-radio ">
    <li id="a22134340"><span class='checked'>0.4375" X 0.88"</span></li>
    <li id="a22151870"><span class=''>0.500" X 1.13"</span></li>
    <li id="a22168545"><span class=''>0.625" X 1.50"</span></li>
    <li id="a22172070"><span class=''>0.625" X 1.57"</span></li>
    <li id="a22184915"><span class=''>0.750" X 1.57"</span></li>
    <li id="a22946970"><span class=''>0.875" X 1.97"</span></li>
</ul>

そうしないと、解析の問題が発生することになります。

EDITED：（そして起動するjsFiddle！http://jsfiddle.net/mori57/PHEhK/）

まず、マークアップをクリーンアップする必要があります。そうしないと、正しく動作しません。div を閉じ、スパンを閉じます。

<div id='main'>
    <div id="a21315" class="content gradient">
        <div class='header gradient'>
            <div class='headimg'></div>
            <h1>Input Shaft Size</h1>
            <div class="minus_sprite "></div>
            <ul class="de-radio ">
                <li id="a22134340"><span class='checked'>0.4375" X 0.88"</span></li>
                <!-- snip ... see jsFiddle -->
            </ul>
        </div>
    </div> <!-- missing a closing div -->
    <div id="a21315" class="content gradient">
        <div class='header gradient'>
            <div class='headimg'></div>
            <h1>another Headline</h1>
            <div class="minus_sprite "></div>
            <ul class="de-radio ">
                <li id="a22134341"><span class='checked'>another checked item"</span></li>
                <!-- snip ... see jsFiddle -->
            </ul>
        </div>
    </div> <!-- you're missing a closing div tag -->
</div>
<div id="output"></div>
​

出力項目を配置する場所の例を示すために、出力 div を追加しました。

さて、あなたのjQueryのために：

// First, get a collection of your content blocks
var $blocks = $(".content.gradient:not(.hidden)");
// get a reference to the div you want to spit all this out into
var $out = $("#output");

// iterate through each of the non-hidden blocks
$blocks.each(function(){
    // it occurs to me that we should cache $(this) since
    // we're accessing it multiple times
    var $this = $(this);
    // get a ref to the h1 from this block's h1
    var this_h1 = $this.find(".header:not(.hidden) h1");
    // get a ref to the .checked li from this block
    var this_checked = $this.find(".header:not(.hidden) .checked");
    // if this_h1 contains a result, append it to the output div
    if(this_h1) {
        $out.append(this_h1.clone());            
    }
    // if this_checked contains a result, 
    //append that out in the output div, too        
    if(this_checked){
        $out.append(this_checked.clone());            
    }
});

​

コードが出力されているのを簡単に確認できるように、jsFiddle に少しスタイルを追加しました。

于 2012-11-16T15:24:18.267 に答える