Question

我的输出页面（我无法控制）格式非常糟糕。我正在使用jQuery循环遍历元素并重新组织它们以满足设计规范。

我正在使用类似下面的代码编译字符串，但我想知道是否有办法让它运行得更快？正如你所看到的，我正在嗅探的.html（）是在同一个父元素的子元素中。

$('.parent').each(function(){
    var address = $('.cellInnerWrapper .row-content .address a .addressNumber', this).html() + 
                  $('.cellInnerWrapper .row-content .address a .addressDirection', this).html() + 
                  $('.cellInnerWrapper .row-content .address a .addressName', this).html();
});

这对我来说似乎非常缓慢和重复，但我不是最好的JavaScript和jQuery，不知道如何简化它/加快它。

这是原始的HTML结构：

<div class="parent">
    <div class="cellInnerWrapper">
        <div class="rowContent">
            <div class="address">
                <a href="URL">
                    <span class="addressNumber">17080 </span>
                    <span class="addressDirection"></span>
                    <span class="addressName">Iron Springs Road</span>
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以这样做：

$(document).ready(function() {
    $('.parent').each(function(){
        var address;
        var a = $('.cellInnerWrapper .rowContent .address a');
        address = a.find('.addressNumber').html()+a.find('.addressDirection')+a.find('.addressName').html();
    });
});

我调整了你的html结构。不要忘记使用document.ready事件来确保在执行脚本之前加载了html结构。

希望它有所帮助！

Answer 2

这是一个有效的演示。您可以将公共元素存储在新对象中，然后访问所有必需元素，这样您每次都不必导航DOM。

$('.parent').each(function(){
        var anchor = $('.cellInnerWrapper .rowContent .address a');
        var address = anchor.find('.addressNumber').html() +
        anchor.find('.addressDirection').html() + 
        anchor.find('.addressName').html();
        console.log(address);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div class="cellInnerWrapper">
        <div class="rowContent">
            <div class="address">
                <a href="URL">
                    <span class="addressNumber">17080 </span>
                    <span class="addressDirection"></span>
                    <span class="addressName">Iron Springs Road</span>
                </a>
            </div>
        </div>
    </div>
</div>

Answer 3

    $('.parent').each(function(){
            var a=$('.cellInnerWrapper').find('div.address').children('a').html();
$('div.newaddress').html(a);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="parent">
        <div class="cellInnerWrapper">
            <div class="rowContent">
                <div class="address">
                    <a href="URL">
                        <span class="addressNumber">17080 </span>
                        <span class="addressDirection"></span>
                        <span class="addressName">Iron Springs Road</span>
                    </a>
                </div>
                <div class="newaddress"></div>
            </div>
        </div>
    </div>

尝试这个。

更快地在jQuery循环中定位相同的选择器

3 个答案: