Question

我需要在li中找到一个文本，然后将整个li替换为另一个li。

在下面我想找到第二个li并将其替换为另外两个新li，因此它看起来像下面的第二个列表。

我有这个：

<ul>
    <li>
        <a href="http://app.brollopsfeber.se/hem.asp" class="item-link item-content close-panel no-animation">
            <div class="item-inner">
                <div class="item-title">First</div>
            </div>
        </a>
    </li>
    <li>
        <a href="http://app.brollopsfeber.se/omoss.asp" class="item-link item-content close-panel no-animation">
            <div class="item-inner">
                <div class="item-title">Second</div>
            </div>
        </a>
    </li>
    <li>
        <a href="http://app.brollopsfeber.se/biljetter.asp" class="item-link item-content close-panel no-animation">
            <div class="item-inner">
                <div class="item-title">Third</div>
            </div>
        </a>
    </li>

所以它看起来像这样。

<ul>
    <li>
        <a href="http://app.brollopsfeber.se/hem.asp" class="item-link item-content close-panel no-animation">
            <div class="item-inner">
                <div class="item-title">First</div>
            </div>
        </a>
    </li>
    <li>
        <a href="http://app.brollopsfeber.se/omoss.asp" class="item-link item-content close-panel no-animation">
            <div class="item-inner">
                <div class="item-title">Second</div>
            </div>
        </a>
    </li>
    <li>
        <a href="http://app.brollopsfeber.se/omoss.asp" class="item-link item-content close-panel no-animation">
            <div class="item-inner">
                <div class="item-title">This is the new one</div>
            </div>
        </a>
    </li>
    <li>
        <a href="http://app.brollopsfeber.se/biljetter.asp" class="item-link item-content close-panel no-animation">
            <div class="item-inner">
                <div class="item-title">Third</div>
            </div>
        </a>
    </li>

所以基本上我找到第二个并用第二个替换{另一个li。所以用它替换它。

<li>
    <a href="http://app.brollopsfeber.se/omoss.asp" class="item-link item-content close-panel no-animation">
        <div class="item-inner">
            <div class="item-title">Second</div>
        </div>
    </a>
</li>
<li>
    <a href="http://app.brollopsfeber.se/omoss.asp" class="item-link item-content close-panel no-animation">
        <div class="item-inner">
            <div class="item-title">This is the new one</div>
        </div>
    </a>
</li>

任何输入都非常感谢，谢谢！

Answer 1

你的问题是你要在第二天之后添加一个新的。

将eq()与append()一起使用即可实现这一目标。

$('ul > li:eq(1)').append("New li");

要替换，请使用.html()

$('ul > li:eq(1)').html("2nd li + New li");

要更改第二名下的a href

$('ul > li:eq(1)').find('a').attr('href', 'http://google.com');

要检查文字，请使用:contains()

$('ul > li:contains("Second")').find('a').attr('href', 'http://google.com');

＆＃13;

$('ul > li:eq(1)').append("New li");

//$('ul > li:eq(1)').html("2nd li + New li");

//$('ul > li:eq(1)').find('a').attr('href', 'http://google.com');

//$('ul > li:contains("Second")').find('a').attr('href', 'http://google.com');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
      <li>
        <a href="http://app.brollopsfeber.se/hem.asp" class="item-link item-content close-panel no-animation">
          <div class="item-inner">
            <div class="item-title">First</div>
          </div>
          </a>
        </li>
        <li>
        <a href="http://app.brollopsfeber.se/omoss.asp" class="item-link item-content close-panel no-animation">
          <div class="item-inner">
            <div class="item-title">Second</div>
          </div>
          </a>
        </li>
        <li>
        <a href="http://app.brollopsfeber.se/biljetter.asp" class="item-link item-content close-panel no-animation">
          <div class="item-inner">
            <div class="item-title">Third</div>
          </div>
          </a>
        </li>
  </ul>

＆＃13;

Answer 2

首先，您需要使用eq（）选择器获取第二个li元素。然后克隆第二个li元素并插入目标第二个li：

 var $secondLi = $('li:eq(1)');
 var $secondLiClone = $secondLi.clone();
 $secondLiClone.find('.item-inner').text('This is the new one')
 $secondLi.after($secondLiClone);

＆＃13;

$(function(){
 var $secondLi = $('li:eq(1)');
 var $secondLiClone = $secondLi.clone();
 $secondLiClone.find('.item-inner').text('This is the new one')
 $secondLi.after($secondLiClone);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
      <li>
        <a href="http://app.brollopsfeber.se/hem.asp" class="item-link item-content close-panel no-animation">
          <div class="item-inner">
            <div class="item-title">First</div>
          </div>
          </a>
        </li>
        <li>
        <a href="http://app.brollopsfeber.se/omoss.asp" class="item-link item-content close-panel no-animation">
          <div class="item-inner">
            <div class="item-title">Second</div>
          </div>
          </a>
        </li>
        <li>
        <a href="http://app.brollopsfeber.se/biljetter.asp" class="item-link item-content close-panel no-animation">
          <div class="item-inner">
            <div class="item-title">Third</div>
          </div>
          </a>
        </li>
  </ul>

＆＃13;

如何在li中查找文本并替换li

2 个答案: