查找具有任何文本的DOM属性并将其存储在变量中

时间：2019-01-21 12:38:35

标签： javascript dom

我是javascript新手。我想将svg.class值存储在变量和new中以创建新函数。

例如，在下面的示例中，svg.class的值为overline，需要存储在$ overline = overline中，并需要创建类似function newoverline()的函数名。如何做到这一点？

我的html如下所示：

<span class="mord accent">
<span class="vlist-t">
    <span class="vlist-r">
        <span class="vlist" style="height: 1.20533em;">
            <span class="mord">
                <span class="mord mathdefault">A</span>
            </span>
            <span class="svg-align" style="top: -3.68333em;">
                <span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
                    <span class="halfarrow-left" style="height: 0.522em;">
                        <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
                            <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
                        </svg>
                    </span>
                    <span class="halfarrow-right" style="height: 0.522em;">
                        <svg width="400em" height="0.522em" class="underline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
                            <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
                        </svg>
                    </span>
                </span>
            </span>
        </span>
    </span>
</span>


function overline(item) {
        input = item.parentNode.parentNode.parentNode.parentNode;
    item.outerHTML = "";
}

4 个答案:

答案 0 :(得分：1)

function newoverline()
{
var element=$("svg");

var className = $(element).attr('class');

alert(className);

}

$(document).on('click', '#newline', function(){
newoverline()

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="mord accent">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 1.20533em;">
<span class="mord">
    <span class="mord mathdefault">A</span>
</span>
<span class="svg-align" style="top: -3.68333em;">
<span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
<span class="halfarrow-left" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
    <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
    </svg>
</span>
<span class="halfarrow-right" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
    <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
    </svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>

<input type="button" id="newline" value="getValue">

</button>

答案 1 :(得分：1)

const parse = require('node-html-parser').parse;

function newoverline()
{

var value=[];

var element=$("svg");


for(i=0;i<element.length;i++){
var className = $(element[i]).attr('class');

value.push("$new"+className);
}

alert(JSON.stringify(value));

}

$(document).on('click', '#newline', function(){
newoverline()

});

我已经按照您所说的修改了上面的代码

答案 2 :(得分：1)

function newoverline()
{

var value=[];

var element=$("svg");


for(i=0;i<element.length;i++){
var className = $(element[i]).attr('class');

value.push("$new"+className);
}

var fs = [];

for(j=0;j<value.length;j++){

var element=value[j];

fs[element] =  new Function(
     "return function " + element + "(){ alert('"+element+"')}"
)();

fs[element]();

}





}

$(document).on('click', '#newline', function(){
newoverline()

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="mord accent">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 1.20533em;">
<span class="mord">
    <span class="mord mathdefault">A</span>
</span>
<span class="svg-align" style="top: -3.68333em;">
<span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
<span class="halfarrow-left" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
    <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
    </svg>
</span>
<span class="halfarrow-right" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="underline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
    <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
    </svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>

<input type="button" id="newline" value="getValue">

</button>

我已按照您的指定进行更新

答案 3 :(得分：1)

function newoverline()
{
debugger;
var value=[];

var element=$("svg");


for(i=0;i<element.length;i++){
var className = $(element[i]).attr('class');

if(className=="overline"){
$(element[i]).removeAttr("class");
}
if(typeof $(element[i]).attr('class')!="undefined"&&$(element[i]).attr('class')!=undefined){
value.push("$new"+className);
}

}

var fs = [];

for(j=0;j<value.length;j++){

var element=value[j];



fs[element] =  new Function(
     "return function " + element + "(){ alert('"+element+"')}"
)();

fs[element]();

}





}

$(document).on('click', '#newline', function(){
newoverline()

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="mord accent">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 1.20533em;">
<span class="mord">
    <span class="mord mathdefault">A</span>
</span>
<span class="svg-align" style="top: -3.68333em;">
<span class="stretchy" style="height: 0.522em; min-width: 0.888em;">
<span class="halfarrow-left" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="overline" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice">
    <path d="M40 281 V428 H0 V94 H40 V241 H400000 v40z M40 281 V428 H0 V94 H40 V241 H400000 v40z"></path>
    </svg>
</span>
<span class="halfarrow-right" style="height: 0.522em;">
    <svg width="400em" height="0.522em" class="underline" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice">
    <path d="M399960 241 V94 h40 V428 h-40 V281 H0 v-40z M399960 241 V94 h40 V428 h-40 V281 H0 v-40z"></path>
    </svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>

<input type="button" id="newline" value="getValue">

</button>

我修改了代码

相关问题
最新问题