Question

我有以下HTML标记：

<ul id="marketQuotes">
    <li class="main">
        <h4><span class="broker">Achuta Cashew Vengurla </span><span class="place">Vengurla </span><span class="time">25 Aug 10:54AM</span></h4>

        <ul class="submenuLevel1">
            <li class="subcomm">Kernels-Vengurla</li>
            <li class="level1">W180 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 9000 to 9000 (<span class="no-change">0</span>)</li>
            <li class="level1">W210 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 7600 to 7600 (<span class="no-change">0</span>)</li>
            <li class="level1">W240 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 6600 to 6600 (<span class="no-change">0</span>)</li>
            <li class="level1">W320 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5700 to 5700 (<span class="no-change">0</span>)</li>
            <li class="level1">W400 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5100 to 5100 (<span class="no-change">0</span>)</li>
            <li class="level1">JH - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5200 to 5200 (<span class="no-change">0</span>)</li>
            <li class="level1">K - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 4900 to 4900 (<span class="no-change">0</span>)</li>
            <li class="level1">LWP - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 4600 to 4600 (<span class="no-change">0</span>)</li>
            <li class="level1">S - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5000 to 5000 (<span class="no-change">0</span>)</li>
        </ul>
    </li>

    <li class="main">
        <h4>Achuta Cashew Vengurla-Vengurla - 25 Aug 10:54AM</h4>

        <ul class="submenuLevel1">
            <li class="subcomm">Kernels-Vengurla</li>
            <li class="level1">S - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5000 to 5000 (<span class="no-change">0</span>)</li>
            <li class="level1">LWP - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 4600 to 4600 (<span class="no-change">0</span>)</li>
            <li class="level1">K - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 4900 to 4900 (<span class="no-change">0</span>)</li>
            <li class="level1">JH - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5200 to 5200 (<span class="no-change">0</span>)</li>
            <li class="level1">W400 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5100 to 5100 (<span class="no-change">0</span>)</li>
            <li class="level1">W320 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5700 to 5700 (<span class="no-change">0</span>)</li>
            <li class="level1">W240 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 6600 to 6600 (<span class="no-change">0</span>)</li>
            <li class="level1">W210 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 7600 to 7600 (<span class="no-change">0</span>)</li>
            <li class="level1">W180 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 9000 to 9000 (<span class="no-change">0</span>)</li>
        </ul>
    </li>
</ul>

点击最初通过ajax调用附加.main li的按钮。然后再添加一个li到ul列表，依此类推。我在按钮单击时使用此脚本为'h4：

的样式添加跨度

    $(function () {
        $('#marketQuotes .main').each(function () {
            if ($(this).find('span').length) {
                console.log('yes');
                // found!
            } else {
                console.log('no');
                $('.main h4').html(function () {
                    var txt = $(this).text();
                    var classes = ['broker', 'place', 'time'];
                    $(this).html($.map(txt.split(/-/), function (val) {
                        return $('<span/>', {
                            'class': classes.shift()
                        }).text(val)[0];
                    }));
                });
            }
        });
    });

但是，当附加第二个li时，第一个li s h4标记不应该更改，因为它已经具有未完成的跨度。

我在这里做错了吗？的 JSBIN Link

Answer 1

问题是$('.main h4')，它定位文档中的所有.main元素，而不是仅定位当前循环所定位的当前.main文档。因此，请尝试基于上下文的搜索，例如$(this).find('h4')

$(function () {
    $('#marketQuotes .main').each(function () {
        if ($(this).find('span').length) {
            console.log('yes');
            // found!
        } else {
            console.log('no');
            $(this).find('h4').html(function () {
                var txt = $(this).text();
                var classes = ['broker', 'place', 'time'];
                $(this).html($.map(txt.split(/-/), function (val) {
                    return $('<span/>', {
                        'class': classes.shift()
                    }).text(val)[0];
                }));
            });
        }
    });
});

Answer 2

你的其他＆＃39;正在工作，你的功能需要看起来更像这样：

Working Bin

JS

    $('.main h4').each(function () {
        if ($(this).find('span').length) {
            console.log('yes');
            // found!
        } else {
            console.log('no');
           var classes = ['broker', 'place', 'time'];
          $(this).html($.map($(this).text().split(/-/), function (val) {
            return $('<span/>', {
              'class': classes.shift()
            }).text(val)[0];
          }));
        }
    });

Jquery如果附加条件不起作用

2 个答案:

JS