在選定的li之后插入li元素

Question

我有以下列表：

<ol id="mainlist">
<li>Item1
    <ol>
        <li>SubItem1</li>
        <li>SubItem2</li>
        <li>SubItem3</li>
    </ol>
</li>
<li>Item2
    <ol>
        <li>SubItem1</li>
        <li>SubItem2</li>
        <li>SubItem3</li>
    </ol>
</li>
<li>Item3
    <ol>
        <li>SubItem1</li>
        <li>SubItem2</li>
        <li>SubItem3</li>
    </ol>
</li>
</ol>

<span>Add text</span><input type="text" /><span>, after the element </span> <input type="text" /><input type="button" value="Add" />

我有兩個文本輸入。 第一個是用戶應該在第二個文本輸入框中指定的元素之后寫入他/她想要插入的文本。

問題是我不知道如何根據文本選擇正確的li 。

我使用jQuery嘗試了以下內容：

$('input[type="button"]').on('click',function(){
    $item=$('<li>',{
        html:$('input')[0].value
    });
    $position=$('input')[1];

    $('li:contains("'+$position.value+'")').filter(function() {
          return $(this).text() == $position.value;
    }).after($item);
});

但這不起作用。 我不知道如何選擇我要插入對象<li> 。

Answer 1

我已經清理了你的代碼，不得不做一些修改，以使其正常工作。

你遇到的一個問題是你的結構是<ol><li><ol><li>這意味着任何搜索li元素甚至ol li元素都意味着它會附加到父母和孩子身上，而這似乎不是你想要實現的目標。

希望這是你想要實現的目標。

 $(document).ready(function() { $('input[type="button"]').on('click', function() { var item = $('<li>', { html: $('input')[0].value }); var position = $('input')[1].value; $('ol li').each(function() { var firstWord = $(this).text().substr(0, $(this).text().indexOf(" ")); if (firstWord.trim() == position) { $(this).after(item); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol id="mainlist"> <li>Item1 <ol> <li>SubItem1</li> <li>SubItem2</li> <li>SubItem3</li> </ol> </li> <li>Item2 <ol> <li>SubItem1</li> <li>SubItem2</li> <li>SubItem3</li> </ol> </li> <li>Item3 <ol> <li>SubItem1</li> <li>SubItem2</li> <li>SubItem3</li> </ol> </li> </ol> <span>Add text</span> <input type="text" /><span>, after the element </span> <input type="text" /> <input type="button" value="Add" /> 

Answer 2

主要問題是你使用.value來獲取jQuery中的輸入值。 但是， .value屬於javascript。 由於您使用的是jquery，因此需要使用.val() 。

我做了一個例子： https ： //jsfiddle.net/6r18ag68/2/

$('input[type="button"]').on('click',function(){
    var newitem = $('<li>' + $('#txt1').val() + '</li>');

    $('li').filter(function () {
        return $(this).text() == $('#txt2').val();
    }).after(newitem);

    $('#mainlist > li').filter(
          function(){ 
             return $.trim($(this).html().split('<')[0]) == $('#txt2').val(); }).append(newitem);
    });
});

Answer 3

幾點：

1. 您應該使用var聲明變量，例如$item ，除非您希望將它們放在封閉范圍內
2. 聲明， return $(this).text() == $posicion.value; ，有“位置”拼寫錯誤
3. 在您的示例中，一些li節點是相同的。 我假設你需要一種方法通過祖先來區分它們li元素。 這意味着你需要三個輸入

這個怎么樣？

$('input[type="button"]').on('click',function(){
    var newText = $('input#newText').val();
    var ancestorLiText = $('input#ancestorLiText').val();
    var liText = $('input#liText').val();

    var $ancestorEl = $('ol#mainlist').find('li').filter(function (i) {
        return $(this).text() === ancestorLiText;
    });
    var $el = $ancestorEl.find('li').filter(function (i) {
        return $(this).text() === liText;
    });
    var $newLi = $('<li>').text(newText);
    $el.after($newLi);
});

您應該能夠從此代碼中獲取所需的HTML（您需要具有ID“newText”，“ancestorLiText”和“liText”的輸入）

另請注意:contains()選擇器就像是對元素文本的全局搜索。 因此，搜索li:contains(chair)將匹配<li>chair</li>和<li>not a chair</li> 。