如何在不影响兄弟姐妹的情况下更改li中的文本

时间:2013-03-10 18:00:21

标签: jquery

好的,伙计们,我昨天花了整整一天的谷歌搜索和尝试不同的解决方案但没有任何效果。我有一个动态生成的可折叠div,其中包含各种内容。我的问题出现在ul内部的文本中,我在可折叠内部。我的结构的一个例子如下。

<ul id="list-0">
   <li>
     <div id="div-00" class=".item">
       <span id="item-00">Item</span>
       <select id="slide-00" data-role="slider" data-mini="true">
             <option value="on">Need</option>
             <option value="off">Done</option>                       
       </select>
     </div>
   </li>
   <li>
      <div id="div-01" class=".item">
         <span id="item-01">Item</span>
         <select id="slide-01" data-role="slider" data-mini="true">
             <option value="on">Need</option>
             <option value="off">Done</option>                       
         </select>
     </div>
  </li>
</ul>

我正在尝试更改范围内的文字。用简单的

很容易做到
  $("#item-00").text("whatevertext"); 

......它有效。但是,当我尝试更改任何后续跨度的文本时,文本应用于任何以前单击的跨度....为什么会发生?就像我在将id="#item-01"范围更改为“香蕉”之后将id="#item-00"范围的文本更改为“apples”一样将更改为“apples”。这对我来说毫无意义,我尝试过的任何东西都没有用。如果您需要更多我的代码,请告诉我。

$(document).on('click', '.item', function () {
     var div = $(this).attr("id"); 
     var split = div.split("-");
...more codings.... involving the opening of a popup to let user type in span text in input of id="thisothername"
     var name = $("#thisothername").attr("value");
     $("#" + "item" + "-" + split[1]).text(name);
});

我目前正在使用此功能从输入中获取文本并将其应用于所选的li&gt; div> span .... split [1]是一个数组索引,包含父div id(00或01)的解析数值,然后用于调用子span的id,理论上只改变id的文本aha。

2 个答案:

答案 0 :(得分:1)

你可以这样试试:

$(document).on('click', '.item', function () {

  // .. some other stuff ...

  $(this)
    .find('span')
    .first()
    .text($("#thisothername").attr("value"));
});

答案 1 :(得分:0)

类名不需要标记中的.

 <div id="div-00" class="item">

现在这应该可行

$(document).on('click', '.item', function () {
     var div = $(this).attr("id"); 
     var split = div.split("-");    
     //var name = $("#thisothername").attr("value"); //dont know what does it do
     $("#" + "item" + "-" + split[1]).text("some name");
});

或者您可以使用id拆分

来完成
$(document).on('click', '.item', function () {
         //var div = $(this).attr("id"); 
         //var split = div.split("-");    
         //var name = $("#thisothername").attr("value"); //dont know what does it do
         $("span",this).text("some name");
    });

http://jsfiddle.net/utFmc/1/