首页 \ 问答 \ Jquery AppendTo bug(Jquery AppendTo bug)

Jquery AppendTo bug(Jquery AppendTo bug)

 我正在使用一些jquery并发现jquery .appendTo()函数的奇怪行为。 
 

 在这里查看此代码。 
 

 单击第一列的每个项目时，单击的项目将附加到第二列。 
 

 如果单击项目3和4 ，一切都将按预期工作：它们将按照您单击它们的顺序附加。 当您单击项目1 ，他也将被正确添加。 
 

 问题是当你点击第2项时。 此项目位于第1项内。 
 

 这个项目没有附加到div的末尾，他被附加在他的老父母之上！ 
 

 看图像： 
 

一步步
 

 现在，我期待的与我得到的相比： 
 

预期与真实
 

 如果再次点击第2项，他将被添加到div的末尾。 
 

 这个行为有一些解释吗？ 事实上这是一个错误？ 
 

 我该如何解决这个问题？ 
 

 Ps：Jquery 1.10.1 

I'm working with some jquery and found a weird behaviour of jquery .appendTo() function.
 

Look this code here.
 

When you click on each item of the first column, the clicked item is appended to the second column.
 

If you click items 3 and 4, everything will work as expected: They will be appended in the order you clicked them. When you click on item 1, he will be appended correctly too.
 

The problem is when you click on item 2. This item is inside the item 1.
 

This item is not appended to the end of the div, he' is appended on top of his old parent!
 

Look the images:
 

Step by step
 

Now, what I was expecting versus what I get:
 

Expected vs real
 

If you click again on item 2 he will be appended at the end of the div.
 

This behaviour have some explanation? It's a bug in fact?
 

How can I workaround this?
 

Ps: Jquery 1.10.1

原文：https://stackoverflow.com/questions/29837294
更新时间：2022-10-28 08:10

最满意答案

 看看这是否是你想要做的： 
 

// Create a function for array mapping
// Note that my regex abilities are not great, so I can guarantee
// someone else can do it to where this portion is not necessary
function filterEmpty($v)
    {
        $v =   trim($v);
            return $v;
    }

function getDatesFromFile($filename)
    {
        // Set the file to an array
        $getFile   =   file(__DIR__.$filename,FILE_SKIP_EMPTY_LINES);
        // Pre-assign some variables
        $new       =   
        $arr       =   array();
        $year      =   
        $mo            =   
        $day       =   false;
        // Set today
        $today     =   date('Y-n-j');
        // Set tomorrow
        $tommorow  =   date("Y-n-j", strtotime("+1 day"));
        // Set all the months in the year
        $calendar  =   array(
                            "JANUAR",
                            "FEBRUAR",
                            "MARS",
                            "APRIL",
                            "MAI",
                            "JUNI",
                            "JULI",
                            "AUGUST",
                            "SEPTEMBER",
                            "OKTOBER",
                            "NOVEMBER",
                            "DESEMBER"
                        );
        // Loop through the file array
        foreach($getFile as $key => $line) {
            // Trim the line
            $line  =   trim($line);
            // If empty, skip
            if(empty($line))
                continue;
            // Match the trimmed line for this line: TIRSDAG  28. JUNI  2016 
            $regex      =   '/^([^\s|^\t]{1,})([\s|\t]{1,})([\d]{1,})\.([\s]{1,})([^\t]{1,})([\d]{4})/i';
            $section    =   preg_match($regex,$line,$match);

            if($section) {
                $mo     =   trim($match[5]);
                $mo     =   array_search($mo,$calendar)+1;
                $isDate =   $match[6].'-'.$mo.'-'.$match[3];
            }

            if(!isset($isDate))
                continue;
            elseif(($isDate != $today) && ($isDate != $tommorow))
                continue;

            if(!isset($new[$isDate]))
                $new[$isDate]   =   array();

            // If array is set, go through the sub-set data
            if(preg_match('/^([0-9\.]{4}).*/',$line)) {
                // Again, someone could do this better, I'm sure
                preg_match('/^([\d\.]{5})([^a-zA-Z]{1,})(.+)/i',$line,$details);
                $details   =   array_filter(array_map('filterEmpty',$details));
                unset($details[0]);
                $details   =   array_values($details);

                if(strpos($details[1],' med ') !== false)
                    $hosted     =   explode(' med ',$details[1]);
                elseif(strpos($details[1],'-') !== false)
                    $hosted     =   explode('-',$details[1]);
                elseif(strpos($details[1],'–') !== false)
                    $hosted     =   explode('–',$details[1]);

                $hosted =   array_filter(array_map('filterEmpty',$hosted));

                $new[$isDate][substr($details[0],0,2)]    =   $hosted;
            }
        }

        return $new;
    }

$programs   =   getDatesFromFile('/test.txt');

foreach($programs as $y => $yearRow) {
    echo '<ul>'.PHP_EOL;
    foreach($yearRow as $time => $pData) {
        echo '<li><div>'.number_format($time,2).'</div><div>'.implode('</div><div>',$pData).'</div></li>'.PHP_EOL;
    }
    echo '</ul>'.PHP_EOL;
}

 

 $programs为您提供此数组： 
 

Array
(
    [2016-6-3] => Array
        (
            [06] => Array
                (
                    [0] => Din morgen
                    [1] => Eivind og Helge (L)
                )

            [09] => Array
                (
                    [0] => Formiddag
                    [1] => Hanne (L)
                )

            [12] => Array
                (
                    [0] => Lunsj
                    [1] => Egil (L)
                )

            [15] => Array
                (
                    [0] => Ettermiddagsrush
                    [1] => Monica (L)
                )

            [18] => Array
                (
                    [0] => Max musikk
                    [1] => Hanne (L)
                )

            [20] => Array
                (
                    [0] => Max musikk
                    [1] => Monica (L)
                )

            [22] => Array
                (
                    [0] => Mot midnatt
                    [1] => de beste balladene på 102 (L)
                )

            [24] => Array
                (
                    [0] => Neon, 102
                    [1] => musikk hele natta! (til 08.00)
                )

        )

    [2016-6-2] => Array
        (
            [06] => Array
                (
                    [0] => Din morgen
                    [1] => Eivind, Thor Magnar og Helge (L)
                )

            [09] => Array
                (
                    [0] => Formiddag
                    [1] => Hanne (L)
                )

            [12] => Array
                (
                    [0] => Lunsj
                    [1] => Monica (L)
                )

            [15] => Array
                (
                    [0] => Ettermiddagsrush
                    [1] => Egil (L)
                )

            [18] => Array
                (
                    [0] => Max musikk
                    [1] => Hanne (L)
                )

            [20] => Array
                (
                    [0] => Max musikk
                    [1] => Monica (L)
                )

            [22] => Array
                (
                    [0] => Mot midnatt
                    [1] => de beste balladene på 102 (L)
                )

            [24] => Array
                (
                    [0] => Neon, 102
                    [1] => musikk hele natta! (til 06.00)
                )

        )

)

 

 给你HTML（你必须做一些格式化）： 
 

<ul>
<li><div>6.00</div><div>Din morgen</div><div>Eivind og Helge (L)</div></li>
<li><div>9.00</div><div>Formiddag</div><div>Hanne (L)</div></li>
<li><div>12.00</div><div>Lunsj</div><div>Egil (L)</div></li>
<li><div>15.00</div><div>Ettermiddagsrush</div><div>Monica (L)</div></li>
<li><div>18.00</div><div>Max musikk</div><div>Hanne (L)</div></li>
<li><div>20.00</div><div>Max musikk</div><div>Monica (L)</div></li>
<li><div>22.00</div><div>Mot midnatt</div><div>de beste balladene på 102 (L)</div></li>
<li><div>24.00</div><div>Neon, 102</div><div>musikk hele natta! (til 08.00)</div></li>
</ul>
<ul>
<li><div>6.00</div><div>Din morgen</div><div>Eivind, Thor Magnar og Helge (L)</div></li>
<li><div>9.00</div><div>Formiddag</div><div>Hanne (L)</div></li>
<li><div>12.00</div><div>Lunsj</div><div>Monica (L)</div></li>
<li><div>15.00</div><div>Ettermiddagsrush</div><div>Egil (L)</div></li>
<li><div>18.00</div><div>Max musikk</div><div>Hanne (L)</div></li>
<li><div>20.00</div><div>Max musikk</div><div>Monica (L)</div></li>
<li><div>22.00</div><div>Mot midnatt</div><div>de beste balladene på 102 (L)</div></li>
<li><div>24.00</div><div>Neon, 102</div><div>musikk hele natta! (til 06.00)</div></li>
</ul>


See if this is what you are looking to do:
 

// Create a function for array mapping
// Note that my regex abilities are not great, so I can guarantee
// someone else can do it to where this portion is not necessary
function filterEmpty($v)
    {
        $v =   trim($v);
            return $v;
    }

function getDatesFromFile($filename)
    {
        // Set the file to an array
        $getFile   =   file(__DIR__.$filename,FILE_SKIP_EMPTY_LINES);
        // Pre-assign some variables
        $new       =   
        $arr       =   array();
        $year      =   
        $mo            =   
        $day       =   false;
        // Set today
        $today     =   date('Y-n-j');
        // Set tomorrow
        $tommorow  =   date("Y-n-j", strtotime("+1 day"));
        // Set all the months in the year
        $calendar  =   array(
                            "JANUAR",
                            "FEBRUAR",
                            "MARS",
                            "APRIL",
                            "MAI",
                            "JUNI",
                            "JULI",
                            "AUGUST",
                            "SEPTEMBER",
                            "OKTOBER",
                            "NOVEMBER",
                            "DESEMBER"
                        );
        // Loop through the file array
        foreach($getFile as $key => $line) {
            // Trim the line
            $line  =   trim($line);
            // If empty, skip
            if(empty($line))
                continue;
            // Match the trimmed line for this line: TIRSDAG  28. JUNI  2016 
            $regex      =   '/^([^\s|^\t]{1,})([\s|\t]{1,})([\d]{1,})\.([\s]{1,})([^\t]{1,})([\d]{4})/i';
            $section    =   preg_match($regex,$line,$match);

            if($section) {
                $mo     =   trim($match[5]);
                $mo     =   array_search($mo,$calendar)+1;
                $isDate =   $match[6].'-'.$mo.'-'.$match[3];
            }

            if(!isset($isDate))
                continue;
            elseif(($isDate != $today) && ($isDate != $tommorow))
                continue;

            if(!isset($new[$isDate]))
                $new[$isDate]   =   array();

            // If array is set, go through the sub-set data
            if(preg_match('/^([0-9\.]{4}).*/',$line)) {
                // Again, someone could do this better, I'm sure
                preg_match('/^([\d\.]{5})([^a-zA-Z]{1,})(.+)/i',$line,$details);
                $details   =   array_filter(array_map('filterEmpty',$details));
                unset($details[0]);
                $details   =   array_values($details);

                if(strpos($details[1],' med ') !== false)
                    $hosted     =   explode(' med ',$details[1]);
                elseif(strpos($details[1],'-') !== false)
                    $hosted     =   explode('-',$details[1]);
                elseif(strpos($details[1],'–') !== false)
                    $hosted     =   explode('–',$details[1]);

                $hosted =   array_filter(array_map('filterEmpty',$hosted));

                $new[$isDate][substr($details[0],0,2)]    =   $hosted;
            }
        }

        return $new;
    }

$programs   =   getDatesFromFile('/test.txt');

foreach($programs as $y => $yearRow) {
    echo '<ul>'.PHP_EOL;
    foreach($yearRow as $time => $pData) {
        echo '<li><div>'.number_format($time,2).'</div><div>'.implode('</div><div>',$pData).'</div></li>'.PHP_EOL;
    }
    echo '</ul>'.PHP_EOL;
}

 

$programs gives you this array:
 

Array
(
    [2016-6-3] => Array
        (
            [06] => Array
                (
                    [0] => Din morgen
                    [1] => Eivind og Helge (L)
                )

            [09] => Array
                (
                    [0] => Formiddag
                    [1] => Hanne (L)
                )

            [12] => Array
                (
                    [0] => Lunsj
                    [1] => Egil (L)
                )

            [15] => Array
                (
                    [0] => Ettermiddagsrush
                    [1] => Monica (L)
                )

            [18] => Array
                (
                    [0] => Max musikk
                    [1] => Hanne (L)
                )

            [20] => Array
                (
                    [0] => Max musikk
                    [1] => Monica (L)
                )

            [22] => Array
                (
                    [0] => Mot midnatt
                    [1] => de beste balladene på 102 (L)
                )

            [24] => Array
                (
                    [0] => Neon, 102
                    [1] => musikk hele natta! (til 08.00)
                )

        )

    [2016-6-2] => Array
        (
            [06] => Array
                (
                    [0] => Din morgen
                    [1] => Eivind, Thor Magnar og Helge (L)
                )

            [09] => Array
                (
                    [0] => Formiddag
                    [1] => Hanne (L)
                )

            [12] => Array
                (
                    [0] => Lunsj
                    [1] => Monica (L)
                )

            [15] => Array
                (
                    [0] => Ettermiddagsrush
                    [1] => Egil (L)
                )

            [18] => Array
                (
                    [0] => Max musikk
                    [1] => Hanne (L)
                )

            [20] => Array
                (
                    [0] => Max musikk
                    [1] => Monica (L)
                )

            [22] => Array
                (
                    [0] => Mot midnatt
                    [1] => de beste balladene på 102 (L)
                )

            [24] => Array
                (
                    [0] => Neon, 102
                    [1] => musikk hele natta! (til 06.00)
                )

        )

)

 

Gives you HTML (you'd have to do some formatting):
 

<ul>
<li><div>6.00</div><div>Din morgen</div><div>Eivind og Helge (L)</div></li>
<li><div>9.00</div><div>Formiddag</div><div>Hanne (L)</div></li>
<li><div>12.00</div><div>Lunsj</div><div>Egil (L)</div></li>
<li><div>15.00</div><div>Ettermiddagsrush</div><div>Monica (L)</div></li>
<li><div>18.00</div><div>Max musikk</div><div>Hanne (L)</div></li>
<li><div>20.00</div><div>Max musikk</div><div>Monica (L)</div></li>
<li><div>22.00</div><div>Mot midnatt</div><div>de beste balladene på 102 (L)</div></li>
<li><div>24.00</div><div>Neon, 102</div><div>musikk hele natta! (til 08.00)</div></li>
</ul>
<ul>
<li><div>6.00</div><div>Din morgen</div><div>Eivind, Thor Magnar og Helge (L)</div></li>
<li><div>9.00</div><div>Formiddag</div><div>Hanne (L)</div></li>
<li><div>12.00</div><div>Lunsj</div><div>Monica (L)</div></li>
<li><div>15.00</div><div>Ettermiddagsrush</div><div>Egil (L)</div></li>
<li><div>18.00</div><div>Max musikk</div><div>Hanne (L)</div></li>
<li><div>20.00</div><div>Max musikk</div><div>Monica (L)</div></li>
<li><div>22.00</div><div>Mot midnatt</div><div>de beste balladene på 102 (L)</div></li>
<li><div>24.00</div><div>Neon, 102</div><div>musikk hele natta! (til 06.00)</div></li>
</ul>

相关问答

更多

  • forEach in Angular过滤器不返回(forEach in Angular filter not returning)[2023-07-09]

    当您需要打破循环并返回某些内容时，您不能使用forEach ，因为它不会中断。 你可以使用老式的 for循环来实现它。 引用Array.prototype.forEach | MDN ， 没有办法停止或破坏forEach（）循环，而不是抛出异常。 如果你需要这样的行为，forEach（）方法是错误的工具，请使用纯循环代替。 像这样的东西： angular.module('app').filter('latinTerm', function() { var terms = [ { ...

  • 将foreach嵌入foreach(Nesting foreach in foreach)[2022-04-13]

    对于基元（和对象引用）： const result = A.filter( el => B.includes(el)); 对于对象键平等： const result = A.filter( el => B.some( el2 => el.value === el2.value ) ); 嵌套的forEachs是完全有效的，但在这种情况下，我更喜欢简单的for循环，因为它们是易碎的： for(const el of A){ for(const el2 of B){ if(e ...

  • 在laravel项目中过滤foreach(filter foreach in laravel project)[2022-02-04]

    不是最优的解决方案，但它应该工作： public function getNearest() { $products= Product::orderBy('created_at','DESC')->paginate(5); $user = Auth::user(); $address2 = $user->locatie; //location current user $prepAddr2 = str_replace(' ','+',$ ...

  • Java 8 Stream - 过滤和foreach方法不按预期方式打印(Java 8 Stream - Filter and foreach method not printing as expected)[2023-11-04]

    你的期望是错误的。 当执行终端操作forEach ，它一次消耗Stream一个元素。 它消耗的每个元素都必须通过Stream所有中间操作，这会在forEach在同一元素上执行之前（假定元素通过filter ）导致filter在元素上执行。 换句话说，当Stream流水线中的下一个操作需要其下一个元素（在你的情况下，下一个操作是forEach ）时， filter被延迟地应用到每个元素。 这意味着如果你的终端操作只需要处理一些Stream元素（例如，如果你用findFirst()替换了forEach() fi ...

  • 如何防止在PHP的另一个foreach循环内的foreach循环重复？(How to prevent duplicates on a foreach loop inside another foreach loop in PHP?)[2024-01-07]

    我会建议使用一个查询来解决您的问题。 function countViews() { $query = $this->db->query("SELECT COUNT( * ) AS plays , `time`, `track` FROM `views` GROUP BY `track`,DATE( `time` );"); while($row = $query->fetch_assoc()) { $this->db->query(sprintf("INSERT INTO ...

  • 如何使用foreach过滤对象(how to filter object with foreach)[2022-10-28]

    foreach ($object as $key => $value) { if ($key === "abc") { unset($object->key); } } 虽然看到你知道密钥（根据你的“if”），你可以这样做： unset($object->abc); foreach ($object as $key => $value) { if ($key === "abc") { unset($object->key); ...

  • PHP - 删除重复与foreach？(PHP - Remove duplicates with foreach?)[2024-02-04]

    由于我没有你的数据结构，我正在提供一个通用的解决方案。 如果我们知道$elements的结构，这可以被优化，但下面的内容应该适合你。 $pageNos = array(); foreach($elements as $el) { $pageno = $el->getAttribute("pageno"); if(!in_array($pageno, $pageNos)) { echo $pageno ; array_push($pageNos,$pageno); ...

  • 发送重复和过滤foreach(skip duplicates and filter foreach)[2023-06-27]

    看看这是否是你想要做的： // Create a function for array mapping // Note that my regex abilities are not great, so I can guarantee // someone else can do it to where this portion is not necessary function filterEmpty($v) { $v = trim($v); retur ...

  • Foreach在猪的Foreach里面(Foreach inside Foreach in pig)[2022-07-24]

    来自文档 ： 注意：FOREACH语句只能嵌套到两个级别。 嵌套到三个或更多级别的FOREACH语句将导致语法错误。 您可以在FOREACH中嵌套FOREACH，但不能在其中嵌套另一个嵌套操作。 From the docs: Note: FOREACH statements can be nested to two levels only. FOREACH statements that are nested to three or more levels will result in a grammar ...

  • 在Foreach循环中忽略重复项(Ignore Duplicates in Foreach loop)[2021-11-26]

    创建另一个数组来存储我们已经输出的电子邮件地址，然后在每次迭代检查时我们都没有使用该电子邮件地址。 $emails = array(); //array to store unique emails (the ones we've already used) foreach ($scouts as $participant) { $fname = ucfirst($participant['2']); $lname = ucfirst($participant['3']); ...

相关文章

更多
  • jquery 问题
  • Java Bug模式详解
  • 微信接口bug
  • 基于Hadoop的Cloudbase的问题/Bug
  • Bug分支-git入门教程
  • [警告]Java 7有bug，升级需谨慎！
  • 微信平台上遇到的bug
  • Hadoop中间结果Merge压缩不全bug
  • hive2solr时count的一个bug
  • linux内核bug问题排查过程详细报告

    • 最新问答

    更多
  • 您如何使用git diff文件，并将其应用于同一存储库的副本的本地分支？(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收？(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get（）从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序：页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结？(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow：基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误：RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C＃类名中允许哪些字符？(What characters are allowed in C# class name?)
  • NumPy：将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全？(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet？(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href，而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用：悬停在悬停时：在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)

    • Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

    本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！