0

こんにちは、順序付けられていない要素のリストがあります。<p>クリックすると、要素を 2 つに分割しながら挿入したいと思います<ul>。

問題は、要素を要素から$("</ul>"+text+"<ul class=\"test\">").insertAfter(element);分離しているように見え、最初にタグを挿入してからタグを挿入することです。<p><ul><p><ul>

<ul>また、要素の直前と直後の開始と終了を削除して、別の場所で.temp分割できるようにしたいと思います。<ul>これは私が見つけた唯一の方法でしたが、<p>要素を削除するだけです:$('.temp').remove();

これの開始時にページがフォーマットされる方法は、まさに私が求めているものです。JSは少し壊れています。 http://jsfiddle.net/yU65g/1/

JS:

    $(".test li").click(function () {
    var text = "<p class=\"temp\">Test</p>";
  var index = $(".test li").index(this);
  $("span").text("That was div index #" + index);
   var element = $('.test li').get(index);
    $('.temp').remove();
    $("</ul>"+text+"<ul class=\"test\">").insertAfter(element);
});

HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Click a div!</span>
        <ul class="test">
<li>First div</li>
<li>Second div</li>
<li>Third div</li>

    </ul>
    <p class="temp">Test</p>
 <ul class="test"> 

<li>Fourth div</li>
<li>Fith div</li>
<li>Sixth div</li>
        </ul>

</body>
</html>

CSS:

.test li { background:yellow; margin:5px; }
span { color:red; }
.test {border: solid 1px red; clear:both; margin: 1em;}
.temp {clear:both;}
4

4 に答える 4

2

DOM を操作する場合、「タグ」は実際には存在しません。jQuery は HTML 文字列を解析し、そこから DOM 要素を可能な限り作成してから、ツリーに挿入します。

したがって、DOM 要素を念頭に置いた場合、「分割」とは、次のすべてのli要素 (存在する場合) を取得し、それらを新しいリストに移動する必要があることを意味します。

例えば：

$(".test li").click(function () {
    $("span").text("That was div index #" + $(this).index());

    var $ul = $(this).parent(); // the current list (the parent `ul` element)
    var $following = $(this).nextAll('li'); // all following `li` elements

    if ($following.length > 0) {
        // Create a new list, append the `li` elements and add the list
        // after the current list
        $('<ul />', {'class': 'test'}).append($following).insertAfter($ul);
    }

    // add a paragraph after the current list
    $('.temp').remove();
    $('<p />', {'class': 'temp',text: 'Test'}).insertAfter($ul);
});

デモ

すべての要素を 2 つのリストに分割するだけの場合は、両方のリストが既に存在すると仮定すると、次のように動作します。

var $uls = $("ul.test");
var $lis =  $uls.find("li");

$lis.click(function () {
    var index = $lis.index(this);
    $("span").text("That was div index #" + index);

    var $following = $lis.slice(index + 1); // get all following `li` elements
    if ($following.length > 0) {
       // append to second list
       $uls.eq(1).append($following);
    }

    // append all li elements up to the current one to the
    // first list
    $uls.eq(0).append($lis.slice(0, index + 1));

    // add a paragraph after the first list
    $('.temp').remove();
    $('<p />', {'class': 'temp',text: 'Test'}).insertAfter($uls.eq(0));
});

デモ

于 2013-02-22T01:40:05.253 に答える
1

クリックされた後に兄弟を取得するには、 . nextAll()を強くお勧めします。.detach()はそれらをdomから削除し、移動できます（クリックイベントも登録されたままになります）。必要なを追加して<p>から、テキストの後に複製された ul を追加します。 フィドル

$(".test li").click(function () {
  var copied = $(this).nextAll().detach(), ul = $(this).closest("ul"), copyUl = ul.clone().empty().append(copied), test = $("<p>Test</p>",{"class":"temp"}); 
if(copied.length > 0){
  ul.after(test);
  test.after(copyUl);
}

});
于 2013-02-22T01:38:25.837 に答える
0

jQuery (および JavaScript)は、HTML タグではなくDOMで動作します。$("<tag>")構文に惑わされないでください。作成、追加などを行っているのは、まだ DOM ノードです。

したがって、新しいものを作成$("<p>")して本文に追加し、作成した ul をそれに追加する必要があります。

必要な sを取得するには、コレクションの長さを半分に分割し<li>て使用できます。$("ul li")

作業例: http://jsfiddle.net/yU65g/2/

于 2013-02-22T01:32:49.260 に答える
0

元の ul の後に p と新しい ul を追加します

JS

var li = $('#myul li');
$('body')
    .append($('<p>p</p>'))
    .append($('<ul/>')
    .append(li.slice(li.length/2)));

HTML

<ul id="myul">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
</ul>

http://codepen.io/anon/pen/qKmae

于 2013-02-22T02:30:08.850 に答える