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元素都意味着它会附加到父母和儿童身上; t似乎是你想要实现的目标。

希望这是你想要实现的目标。

＆＃13;

$(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);
      }
    });
  });
});

＆＃13;

<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" />

＆＃13;

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

几点：

您应该使用$item声明var等变量，除非您希望将它们放在封闭范围内
声明return $(this).text() == $posicion.value;，有＆＃34;位置＆＃34;拼错
您的示例中有些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和＃34; newText＆＃34;，＆＃34; ancestorLiText＆＃34;和＆＃34; liText＆＃34）

另请注意，:contains()选择器就像是对元素文本的全局搜索。因此，搜索li:contains(chair)会匹配<li>chair</li>和<li>not a chair</li>。

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

3 个答案: