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

您如何编写该行的简单错误：

$('.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>

否则，你一定会遇到解析问题。

编辑：（和一个 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 回答
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 回答