javascript - javascript：如何管理没有 ID 的 div

Question

我的页面充满了 php 生成的内容，这些内容拆分为具有相同类但没有 id 的 div。我想展示一些允许我管理、更改和删除 div 的按钮；按钮应该能够更改类、删除 div 并选择 div 的内容。我怎样才能做到这一点？有没有办法将按钮的 onclick 操作设置为某种东西，比如 ... onclick="changetheclass(this)" 这实际上会改变包含此按钮的 div 的类？

伙计，我觉得我在这里没有任何意义:(有人明白我在说什么吗？如果是这样，有没有可能这样做？提前谢谢！:)

编辑：这是 div 之一，因此您可以理解我在说什么：

    <div class="box"><p>
    this is the content of the div
    <button onclick="change_the_class(this_div_or_something)">click here to change the class of the div</a>
    <button onclick="select_the_content(this_div_or_something)">click here to change the class of the div</a>
    <button onclick="delete_the_whole_div(this_div_or_something)">click here to change the class of the div</a>
</p></div>

score 1 · Accepted Answer

这是你要找的吗？？

<html>
    <head>
        <script type="text/javascript">
           function changeClass(elm) {
               elm.parentNode.className ='newcss';
           }

           function deleteDiv(elm) {
               var par = elm.parentNode;
               var gran = par.parentNode;
               gran.removeChild(par);
           }
        </script>
    </head>
    <body>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
    </body>
</html>

score 0 · Accepted Answer

在 JS 中，您可以使用querySelectorAll：

//get all divs with class "myDiv"
var divs = document.querySelectorAll('div.myDiv');

//for each of the gathered divs, do something with it
for(var i=0; i< divs.length;i++){
    var aDiv = divs[i];

    //"aDiv" is a div in the collection of matched divs
    //you can do anything with it: add buttons etc.

}

score 0 · Accepted Answer

首先远离onclick="something"-inline JavaScript。那么是的，你仍然可以在没有 id 的情况下做你想做的事情。

var divs = document.getElementsByTagName('div'),
    result = [],
    len = divs.length,
    i = 0,
    aLink;

for(; i < len; i++){
    // update the condition if there can be more than one class name as this assume a single class name
    if (divs[i].className == 'myClassName') result.push(divs[i]);
}

len = result.length;
i = 0;

for (; i < len; i++) {
aLink = document.createElement('a');
aLink.innerHTML = 'Edit';
aLink._parent = result[i]; // store a reference to the parent div
aLink.href = '#';
aLink.onclick = function(ev) {
ev.preventDefault();
// do your edit stuff here, ev.target._parent contain the targetted div
};
result[i].appendChild(aLink);
}

score -1 · Accepted Answer

$('div.my-class').each( function( index, element ){
   var div = $( element ); // not sure if this is needed

   // add the buttons, e.g. via div.html('');

   // add the buttons' click handlers    
});

javascript - javascript：如何管理没有 ID 的 div

4 回答 4

Related

Reference