在选定的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>的项目。

- myhappycoding

---

假设用户在第二个文本框中输入了“SubItem3”，那么第一个文本框中的值应该插入到哪里？ - Vim

你在第8行写成了$posicion.value，而不是$position.value。 - squill25

你的 $item 和 $position 变量是在函数外声明的，对吗？ - squill25

你为什么要同时使用 ':contains' 选择器和 filter() 函数？ - charlietfl

抱歉，我已经将变量的名称翻译成了英文，以便更容易理解，但我错过了变量名“$posicion”。另外，为什么我要在函数外声明变量？它不会给我带来任何错误。 - myhappycoding

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

- Stewartside

---

谢谢您的回答，但这并不是我想要的。我不想在给定数字位置后插入<li>元素。我想要的是，在给定项目名称后插入一个新的<li>元素。 - myhappycoding

不，只需要在第二项后面。我认为你的代码很接近了，我一直在尝试用“包含”替换“nth-child”，但仍然无法正常工作。 - myhappycoding

Answer 2

主要问题在于您在jQuery中使用了.value来获取输入值。然而，.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);
    });
});

- renakre

---

你的代码不起作用，<li>元素被插入到所有<li>元素之后。 - myhappycoding

@galeonweb，我对此不是很清楚。如果它们有多个匹配的<li>项，我们应该如何确定特定的<li>项？ - renakre

那就是问题所在。你有两个文本框，其中一个用于输入要插入的文本，另一个用于与列表中的li项匹配的文本。在你的代码中，你使用了':contains()'，但它并不能进行精确的文本匹配。 - myhappycoding

它可能匹配多个项目，我们需要决定在哪个之后添加？您希望它如何工作？ - renakre

这是一项大学练习。它只是在另一个项目后插入一个项目。但是位置没有给出，因此您需要使用文本内容。例如，如果我说“Item3”，则新元素将插入在“Item3”之后。 - myhappycoding

那么如果你说subitem3，那么新项目将会在它们之后插入，对吗？ - renakre

Answer 3

一些要点：

1. 在声明变量（如 $item）时，应使用 var，除非您想将它们放入一个封闭的作用域
2. 语句 return $(this).text() == $posicion.value; 拼写了 "position"
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>。

- Lucas Ross