引用文本区域?

时间:2012-09-29 09:50:35

标签: javascript jquery html

我刚刚开始编程,并且无论如何都无法对以下问题提出任何明智的方法,所以任何帮助都将不胜感激!我有一个.html文件结构如下:

<head>
<title>ABC</title>
</head>
<body>
<div class="norm">
...    
<span class="jnenbez">13</span>
....    
<div class="Absatz">text</div>
<div class="Absatz">text</div>
<div class="Absatz">CITE HERE**</div>

“norm”div是一个父节点。 “jnenbez”跨度和“Absatz”div都在“norm”div中,但它们嵌套的深度可能会有所不同。现在我想引用“CITE HERE”区域,意思是生成“jnenbez 13 Absatz 3 ABC”的输出 - 意味着获得相同“规范”的“jnenbez”跨度的文本内容div,得到“Absatz”div的索引号,因为它是“norm”div的第三个孩子“Absatz”并获得内容。

1)我怎么能把这个字符串给用户,所以他可以把它粘贴到其他地方?似乎不容易修改Firefox的复制+粘贴行为。一个明显的解决方案是将输出放在括号中,如[jnenbez ...]在每个div文本内容的末尾,但这会降低html的可读性......

2)甚至可以通过JQuery自动生成此输出吗?

1 个答案:

答案 0 :(得分:1)

不确定存储/显示信息的好方法。 另外,不确定你在class ='norm'容器中会有什么标记。这非常重要,完全影响有用解决方案的形状。

我假设了一个特定的结构 - 一个说第一个包含的跨度是感兴趣的结构。另一个假设是容器中唯一的div是有意义的,需要计算。

我相信你可以轻松打破它。 :d

<!DOCTYPE html>
<html>
<head>
<script>
function onBtnPress(element)
{
    var result;

    var cont = element.parentNode;

    var span = cont.getElementsByTagName('span')[0];
    result = span.className + " ";
    result += span.innerHTML + " ";

    var divList = cont.getElementsByTagName('div');
    result += divList[0].className + " ";
    result += divList.length+" ";
    result += document.title;

    cont.getElementsByTagName('p')[0].innerHTML = result;
}
</script>

<title>ABC</title>
</head>
<body>
    <div class="norm">
        <span class="jnenbez">13</span>
        <div class="Absatz">text</div>
        <div class="Absatz">text</div>
        <div class="Absatz">CITE HERE**</div>
        <button onclick='onBtnPress(this);'>click me</button>
        <p>[string here]</p>
    </div>
    <div class="norm">
        <span class="Crapple">8</span>
        <div class="ipod">worst</div>
        <div class="ipod">music</div>
        <div class="ipod">player</div>
        <div class="ipod">I ever</div>
        <div class="ipod">bought</div>
        <div class="ipod">CITE HERE**</div>
        <button onclick='onBtnPress(this);'>click me</button>
        <p>[string here]</p>
    </div>
</body>
</html>