0

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

我在一个实时的 3rd 方网站上使用它——这意味着我无法控制 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

[编辑：上面的 HTML 是示例代码 - 它可以是任何东西，因为它将是我悬停在上面的第 3 方网站的代码 - 因此请仅评论 JQuery 代码 - 谢谢，史蒂夫]

4

2 回答 2

1

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

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

于 2013-01-09T15:17:26.953 回答
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/

于 2013-01-09T14:49:37.110 回答