追加时If条件不工作

Jquery If condition not working when appending

本文关键字：工作 条件 If 追加      更新时间：2023-09-26

我有以下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的按钮单击。然后在ul列表中再添加一个li，以此类推。我使用这个脚本上的按钮点击添加跨度'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和h4标签不应该改变，因为它已经有跨度，这是没有完成的。

我在这里做错了什么吗? JSBIN链接

你的'else'正在工作，你的函数需要看起来更像这样:

工作本

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];
          }));
        }
    });

问题是针对文档中所有.main元素的$('.main h4')，而不是仅针对当前循环所针对的当前.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];
                }));
            });
        }
    });
});
相关文章：