jQuery:在元素之前关闭Div然后重新打开div

时间:2017-03-07 21:42:50

标签: javascript jquery wordpress dom

我在我的容器中间,想要从容器中取出一张图片。

现在我有类似的东西

<div class="container">
    ...
    <img />
    ...
</div>

我想用jQuery做这个

<div class="container">
    ...
</div>
<img />
<div class="container">
    ...
</div>

这是问题所在。我无法修改我的代码以便在之前关闭并在之后重新打开(使用PHP或HTML)。我正在与WP合作,而<img />正处于内容的中间位置。 img src可以改变,也可以改变它的属性。所以我不能正确地走出它。考虑到PHP中无法触及容器中的所有内容(如果您有办法将该img与PHP隔离,我会对它开放,但我认为没有办法。)

我在jQuery中发现的一切都强迫你在打开一个div时关闭它,你不能在所选元素之前关闭一个div。

在一天结束时(整个事情的TLDR的类型),我尝试做的是在图像之前抛出</div><div class="container">之后。似乎无法在PHP中实现它,并且正在寻找一种jQuery方法。

PS:我猜一个普通的js方式也会起作用吗?

1 个答案:

答案 0 :(得分:0)

我相信你正在寻找这些方面的东西?

https://jsfiddle.net/tr_santi/kcqcmp6d/(点击右上角的“重新排序”)

r"\$x"

HTML之前:

global

    log /dev/log    local0
    log /dev/log    local1 notice
    maxconn 20000
    chroot /var/lib/haproxy
    stats socket /run/haproxy/admin.sock mode 660 level admin
    stats timeout 30s
    user haproxy
    group haproxy
    daemon
    tune.ssl.default-dh-param 2048

    # Default SSL material locations
    ca-base /etc/ssl/certs
    crt-base /etc/ssl/private

    ssl-default-bind-ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS
    ssl-default-bind-options no-sslv3 no-tls-tickets
    ssl-default-server-ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS
    ssl-default-server-options no-sslv3 no-tls-tickets

defaults
    log     global
    mode    http
    option  httplog
    option  dontlognull
    option forwardfor
    monitor-uri /index.html
    stats enable
    stats uri /stats
    stats realm Haproxy\ Statistics
    timeout connect 5000
    timeout client  50000
    timeout server  50000
    errorfile 400 /etc/haproxy/errors/400.http
    errorfile 403 /etc/haproxy/errors/403.http
    errorfile 408 /etc/haproxy/errors/408.http
    errorfile 500 /etc/haproxy/errors/500.http
    errorfile 502 /etc/haproxy/errors/502.http
    errorfile 503 /etc/haproxy/errors/503.http
    errorfile 504 /etc/haproxy/errors/504.http

frontend http
  bind *:80
#Defining ACL based on a string in URI
  acl dm_in_uri path_sub dm
  acl mo_in_uri path_sub mo
  acl lab_host hdr(host) -i subdomain.domain.com
  reqadd X-Forwarded-Proto:\ http
#Special route which matches both hostname and string acl
  use_backend lab_mo_api if lab_host mo_in_uri api_in_uri
  use_backend lab_portal if lab_host

frontend https
  bind *:443 ssl crt /etc/ssl/<blah>.pem
#Defining ACL based on a string in URI
  acl api_in_uri path_sub api
  acl dm_in_uri path_sub dm
  acl mo_in_uri path_sub mo
  acl lab_host hdr(host) -i subdomain.domain.com
  reqadd X-Forwarded-Proto:\ https
#Special route which matches both hostname and string acl 
  use_backend lab_mo_api if lab_host mo_in_uri api_in_uri
  use_backend lab_portal if lab_host


backend lab_mo_api
  reqrep (.*)\/mo\/api(\/.*) \1\ /lab\/
  redirect prefix https://<aws_lambda_url> code 301

HTML AFTER:

var $container = $(".container");       //Get container
var $img = $container.find("img");      //Find image in container

$img.detach().insertAfter($container);  //Move the image to be after the container

var $newContainer = $container.clone(); //Duplicate the container
$newContainer.insertAfter($img);        //Insert the duplicated container after the image