Question

我正在使用jquery mouseenter / leave来尝试更改容器内的（当前悬停的）TEXT而不更改任何其他子元素。

我在第三方网站上使用此功能 - 这意味着我无法控制HTML代码，这给了我以下问题：

我不知道父容器中有多少子元素
HTML标记（包括父标记和子标记）可以是LI，IMG，A，SPAN，H1等等。
我需要更改的文字的位置将从第一个到最后一个和/之间的任何事情

我尝试了以下内容（nameX和indexX用于标识当前元素 - 我不能自己使用'this'，因为我需要在其他地方使用实际值）：

$("a,img,p").mouseenter(function (event) {
   nameX = this.tagName;
   indexX = $(nameX).index(this);
   $(''+nameX+':eq('+indexX+')').text("hello");
});

<ul>
  <li>
     <a href="">bullet 1  
        <img src="http://bit.ly/ZqJ1DL"  width="229" height="129"/>
     </a><br>  
     <a href="">bullet 2  
     </a><br>  
     <a href="">bullet 3
     </a><br>
     general text
  </li>
</ul>

当我使用上述内容时 - 当它悬停在子弹2或子弹3上时它会起作用。

然而，它不适用于子弹1 - 这里JS取代了父级的所有内容，包括图像 - 我只希望它替换TEXT并保留图像（和任何其他孩子），不管文本的位置。

参见示例FIDDLE HERE

[编辑：上面的HTML是示例代码 - 它可能是任何东西，因为它将是我正在盘旋的第三方网站的代码 - 因此请仅评论JQuery代码 - 谢谢，Steve]

Answer 1

此脚本选择锚点中的所有DOM元素，以便在更改文本时替换它们：

$("a").mouseenter(function (event) {
  nameX = this.tagName;
  indexX = $(nameX).index(this);

  var elem = $('' + nameX + ':eq(' + indexX + ')');  
  var internals = $("*", elem);  
  elem.html("")
      .append(internals)
      .append("hello");
});

http://jsfiddle.net/vvtgQ/

这是一个使用jQuery.contents（）仅适用于：text元素的版本：

$("a").mouseenter(function (event) {
  nameX = this.tagName;
  indexX = $(nameX).index(this);

  var elem = $('' + nameX + ':eq(' + indexX + ')');
  elem.contents().each(function(index, item) {    
    if(item.nodeType == 3)
    {
      item.nodeValue = "hello";
    }
  });
});

http://jsfiddle.net/eYSXp/

Answer 2

我不确定这是否已经得到了答案，但是：

$("a,p").mouseenter(function (event) {  
  nameX = this.tagName;
  indexX = $(nameX).index(this);
  runningText = $(''+nameX+':eq('+indexX+')').text();
  runningText = runningText.replace(/\W/g, ' ');
  while (runningText.charAt(runningText.length-1) == " ") {
    runningText = runningText.substr(0, runningText.length-1);
  }
  newText = "hello";
  newHTML = $(this).html();
  newHTML = newHTML.replace(runningText, newText);
  $(this).html(newHTML);  
});

http://jsfiddle.net/esauq/36/

如何动态地使用jquery更改子文本

2 个答案: