Найти класс внутри другого класса и сделать некоторые действия с браузером

Question

Я пытаюсь найти конкретный класс (profileCard), а затем проверить, есть ли у этого класса другой класс (followStatus). Если в нем есть followStatus, я хочу нажать кнопку, которая также находится внутри класса profileCard. Вот мой код:

var profileCard = document.getElementsByClassName('ProfileCard'); 
var unfollowButtons = profileCard.getElementsByClassName('button-text'); 
var followStatus = profileCard.getElementsByClassName('FollowStatus'); 

for (var i = 0; i < profileCard.length; i++) { 
    if (followStatus[i] != null) { 
    unfollowButtons[i].click(); 
    } 
} 

Я хочу использовать эту функцию в Chrome просто вставить его в консоль, но код, казалось бы, ничего не делает: кнопка никогда не нажата. Где ошибка в моем коде и как я могу это исправить?

Answer 1

Это более удобно использовать querySelector метод здесь внутри цикла над .profileCards элементами:

var profileCards = document.querySelectorAll('.ProfileCard'); 

for (var i = 0; i < profileCards.length; i++) { 
    if (profileCards[i].querySelector('.FollowStatus')) { 
     var button = profileCards[i].querySelector('.button-text'); 
     if (button) { 
      button.click(); 
     } 
    } 
} 

Answer 2

Ну я предлагаю программирование своего рода селектор узла или с помощью http://jquery.com/.

Обратите внимание: имя документа.getElementsByClass не совместимо в некоторых браузерах. Вот селектор узлов, который я только что запрограммировал, который решает это.

N$ = (function(){ 
    if (!Array.prototype.indexOf) 
    { 
     Array.prototype.indexOf = function(elt /*, from*/) 
     { 
     var len = this.length >>> 0; 

     var from = Number(arguments[1]) || 0; 
     from = (from < 0) 
      ? Math.ceil(from) 
      : Math.floor(from); 
     if (from < 0) 
      from += len; 

     for (; from < len; from++) 
     { 
      if (from in this && 
       this[from] === elt) 
      return from; 
     } 
     return -1; 
     }; 
    } 
    if (!window.getComputedStyle) {//IE 
     window.getComputedStyle = function(el, pseudo) { 
      this.el = el; 
      this.getPropertyValue = function(prop) { 
       var re = /(\-([a-z]){1})/g; 
       if (prop == 'float') prop = 'styleFloat'; 
       if (re.test(prop)) { 
        prop = prop.replace(re, function() { 
         return arguments[2].toUpperCase(); 
        }); 
       } 
       return el.currentStyle[prop] ? el.currentStyle[prop] : null; 
      } 
      return this; 
     } 
    } 

    var N$_CURRENT_EVENT_THIS = null; 
    var DOM_N$ = function(selector){ 
     if(typeof selector == typeof ""){ 
      this.selector = selector; 
      this.nodes = $prepare(this.selector); 
      this.win = window; 
      this.doc = document; 
     }else if(typeof selector == typeof {}){ 
      this.selector = N$_CURRENT_EVENT_THIS.selector; 
      this.nodes = $prepare(this.selector); 
      this.win = window; 
      this.doc = document; 
     } 


     this.getSelector=function(){ 

      return this.selector; 
     }; 
     this.eachNode = function(func){ 
      var that = this; 
      for (var i = 0; i < this.nodes.length; i++) { 
       N$_CURRENT_EVENT_THIS = that; 
       func(this.nodes[i]); 
       N$_CURRENT_EVENT_THIS = null; 
      }; 
     }; 
     this.css = function(attr, value){ 
      N$_CURRENT_EVENT_THIS = this; 
      var attribute = ""; 
      if(attr.indexOf('-') !== -1){ 
       var split_attr = attr.split('-'); 
       for (var i = 0; i < split_attr.length; i++) { 
        if(i != 0) 
         attribute += split_attr[i].charAt(0).toUpperCase() + split_attr[i].slice(1); 
        else 
         attribute += split_attr[i].charAt(0).toLowerCase() + split_attr[i].slice(1); 
       }; 
      }else{ 
       attribute = attr; 
      } 

      var properties = new Array(); 
      for (var i = 0; i < this.nodes.length; i++) { 
       if(typeof value != 'undefined'){ 
        this.nodes[i].style[attribute] = value; 
       } 
       properties.push(window.getComputedStyle(this.nodes[i], null).getPropertyValue(attr)); 
      }; 
      return properties; 
     }; 
     this.addEvent = function(event_, func){ 
      var that = this; 
      for (var i = 0; i < this.nodes.length; i++) { 
       var node = this.nodes[i]; 
       var events = this.nodes[i].events || {};  
       if(node.addEventListener){ 
        if((event_) in events){ 
         node.removeEventListener(event_, events[event_], true); 
         var tmp___ = events[event_]; 
         var tmp__ = function(){ 
          this.bar = "hello"; 
          N$_CURRENT_EVENT_THIS = that; 
          tmp___(node, event_); 
          func(node, event_); 
          N$_CURRENT_EVENT_THIS = null; 
         }; 
         node.addEventListener(event_, tmp__, true); 
         events[event_] = tmp__; 
        }else{ 
         var tmp__ = function(){ 
          N$_CURRENT_EVENT_THIS = that; 
          func(node, event_); 
          N$_CURRENT_EVENT_THIS = null; 
         }; 
         node.addEventListener(event_, tmp__, true); 
         events[event_] = tmp__; 
        } 
       }else if(node.attachEvent){ 
        var ie_event = 'on' + event_; 
        if(event_ in events){ 
         node.attachEvent(ie_event, function(){ 
          N$_CURRENT_EVENT_THIS = that; 
          func(node, event_); 
          events[event_](node, event_); 
          N$_CURRENT_EVENT_THIS = null; 
         }); 
        }else{ 
         node.attachEvent(ie_event, function(){ 
          N$_CURRENT_EVENT_THIS = that; 
          func(node, event_); 
          N$_CURRENT_EVENT_THIS = null; 
         }); 
        } 
        events[event_] = func; 
       } 
       this.nodes[i].events = events; 
      } 
     }; 
     this.removeEvent = function(event_){ 
      N$_CURRENT_EVENT_THIS = this; 
      for (var i = 0; i < this.nodes.length; i++) { 
       var node = this.nodes[i]; 
       var events = this.nodes[i].events || {}; 
       if(node.removeEventListener){ 
        if((event_) in events){ 
         node.removeEventListener(event_, events[event_], true); 
         events[event_] = null; 
        } 
       }else if(node.detachEvent){ 
        var ie_event = 'on' + event_; 
        if((event_) in events){ 
         node.detachEvent(ie_event, events[event_]); 
         delete events[event_]; 
        } 
       } 
      } 
     }; 
     this.text = function(str){ 
      N$_CURRENT_EVENT_THIS = this; 
      for (var i = 0; i < this.nodes.length; i++) { 
       var node = this.nodes[i]; 
       node.innerHTML = ''; 
       node.appendChild(document.createTextNode(str)); 
      } 
     }; 
     this.animate = function(func, from, to, speed){ 
      var nodes = this.nodes; 
      var that = this; 
      for (var i = 0; i < this.nodes.length; i++) { 
       (function animate(func, from, to, speed, i){ 
        if(from >= to){ 
         N$_CURRENT_EVENT_THIS = that; 
         func(nodes[i], to); 
         N$_CURRENT_EVENT_THIS = null; 
        }else{ 
         N$_CURRENT_EVENT_THIS = that; 
         func(nodes[i], from); 
         N$_CURRENT_EVENT_THIS = null; 
         setTimeout(
          function(){ 
           animate(func, from +1, to, speed, i); 
          }, speed 
         ); 
        } 
       })(func, from, to, speed, i); 
      } 
     }; 
     this.appendNode = function(tagname, innerHTML){ 
      for (var i = 0; i < this.nodes.length; i++) { 
       var new_node = document.createElement(tagname); 
       new_node.innerHTML = innerHTML; 
       this.nodes[i].appendChild(new_node); 
      } 
     }; 
     this.removeNode = function(){ 
      for (var i = 0; i < this.nodes.length; i++) { 
       this.nodes[i].parentNode.removeChild(this.nodes[i]); 
      } 
     }; 
     function $prepare(str){ 
      str = str.replace(/(\s+>\s+)/g,'>'); 
      str = str.replace(/(\s+)/g,' '); 
      var str_ = str; 
      var querys = str.split(/[\s\>]+/); 
      var querys_des = Array(); 

      var ascender = new Array(); 
      for (var i = 0; i < str_.length; i++) { 
       if(str_[i] == ">" || str_[i] == " "){ 
        var tmp_ = (str_[i] == ">")? 'next_child' : 'ascended'; 
        ascender.push(tmp_); 
       } 
      }; 
      var recognizes = new Array(); 
      for (var i = 0; i < querys.length; i++) { 
       var asc_child = null; 
       asc_child = ascender[i-1]; 
       var tmp_ = { 
        "selector": querys[i], 
        "i":i 
       }; 
       recognizes[i] = recognize(querys[i]); 
       if(i != 0){ 
        tmp_["asc_child"] = asc_child; 
       }else{ 
        tmp_["base_selector"] = true; 
       } 
       querys_des.push(tmp_); 
      }; 

      return $select(querys_des, recognizes); 
     } 
     function $select(querys_des, recognizes, parent_){ 
      var parents = parent_ || null; 
      for (var i = 0; i < querys_des.length; i++) { 
       if('base_selector' in querys_des[i]){ 
        parents = recognizes[querys_des[i]['i']]; 
       }else if('asc_child' in querys_des[i]){ 
        var cur_children = recognizes[querys_des[i]['i']]; 
        if(querys_des[i]['asc_child'] == 'next_child'){ 
         var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']); 
         parents = compatible; 
        }else if(querys_des[i]['asc_child'] == 'ascended'){ 
         var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']); 
         parents = compatible; 
        } 
       } 
      }; 

      return parents; 
     } 

     function compatible_children(parents, children, type){ 
      var ret = new Array(); 
      for (var a = 0; a < parents.length; a++) { 
       for (var b = 0; b < children.length; b++) { 
        if(type == 'next_child'){ 
         if(parents[a] == children[b].parentNode){ 
          if(ret.indexOf(children[b]) == -1) 
           ret.push(children[b]); 
         } 
        }else if(type == 'ascended'){ 
         if(isin(parents[a], children[b])){ 
          if(ret.indexOf(children[b]) == -1) 
           ret.push(children[b]); 
         } 
        } 
       } 
      } 
      return ret; 
     } 

     function isin(parent, child){ 
      var child_ = child; 
      var ret = new Array(); 
      while((child_ = child_.parentNode) && child_ != document.body){ 
       if(parent == child_){ 
        return true; 
       } 
      } 
      return false; 
     } 

     function recognize(str){ 
      var identifier = new Array(); 

      var id_ = false; 
      var class_ = false; 
      var dom_ = false; 
      if(str.indexOf("#") >= 0){ 
       id_ = true; 
       var tmp = str.split("#")[1]; 
       if(str.indexOf(".") >= 0){ 
        identifier['ID'] = tmp.split(".")[0]; 
       }else{ 
        identifier['ID'] = tmp; 
       } 
      } 

      if(str.indexOf(".") >= 0){ 
       class_ = true; 
       var tmp = str.split(".")[1]; 
       if(str.indexOf("#") >= 0){ 
        identifier['CLASS'] = tmp.split("#")[0]; 
       }else{ 
        identifier['CLASS'] = tmp; 
       } 
      } 


      if(id_ && class_){ 
       if(str.indexOf("#") < str.indexOf(".")){ 
        var tmp = str.split("#")[0]; 
        if(tmp.length > 0){ 
         dom_ = true; 
         identifier['DOM'] = tmp; 
        } 
       }else{ 
        var tmp = str.split(".")[0]; 
        if(tmp.length > 0){ 
         dom_ = true; 
         identifier['DOM'] = tmp; 
        } 
       } 
      }else if(id_){ 
       var tmp = str.split("#")[0]; 
       if(tmp.length > 0){ 
        dom_ = true; 
        identifier['DOM'] = tmp; 
       } 
      }else if(class_){ 
       var tmp = str.split(".")[0]; 
       if(tmp.length > 0){ 
        dom_ = true; 
        identifier['DOM'] = tmp; 
       } 
      }else{ 
       if(str.length > 0){ 
        dom_ = true; 
        identifier['DOM'] = str; 
       } 
      } 


      var x; 
      if(class_){ 
       if(typeof document.getElementsByClassName !== 'function') {//Old browsers 
        x = document.body.getElementsByTagName("*"); 
       }else{ 
        x = document.getElementsByClassName(identifier['CLASS']); 
       } 

      }else if(dom_){ 
       x = document.getElementsByTagName(identifier['DOM']); 
      }else if(id_){ 
       x = document.body.getElementsByTagName("*"); 
       for (var i = 0; i < x.length; i++) { 
        if(x[i].getAttribute("id") != identifier['ID']){ 
         delete x[i]; 
        } 
       }; 
      } 

      var elements = new Array(); 


      for (var i = 0; i < x.length; i++) { 
       if(id_ && class_){ 
        if(x[i].getAttribute("id") == identifier["ID"] && x[i].getAttribute("class") == identifier["CLASS"]){ 
         if(dom_){ 
          if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){ 
           elements.push(x[i]); 
          } 
         }else{ 
          elements.push(x[i]); 
         } 
        } 
       }else if(id_){ 
        if(x[i].getAttribute("id") == identifier["ID"]){ 
         if(dom_){ 
          if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){ 
           elements.push(x[i]); 
          } 
         }else{ 
          elements.push(x[i]); 
         } 
        } 
       }else if(class_){ 
        if(x[i].getAttribute("class") == identifier["CLASS"]){ 
         if(dom_){ 
          if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){ 
           elements.push(x[i]); 
          } 
         }else{ 
          elements.push(x[i]); 
         } 
        } 
       }else{ 
        if(dom_){ 
         if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){ 
          elements.push(x[i]); 
         } 
        }else{ 
         elements.push(x[i]); 
        } 
       } 

      }; 

      return elements; 
     } 
    } 


    var selectors = new Array(); 
    return function(selector){ 
      var N$_new = new DOM_N$(selector); 
      var N$_ = null; 
      if(selectors.length > 0){ 
       for (var i = selectors.length - 1; i >= 0; i--) { 
        if(selectors[i].selector == selector){ 
         var not_in = new Array(); 
         for (var b = N$_new.nodes.length - 1; b >= 0; b--) { 
          if(selectors[i].nodes.indexOf(N$_new.nodes[b]) == -1){ 
           not_in.push(N$_new.nodes[b]); 
          } 
         }; 
         for (var a = not_in.length - 1; a >= 0; a--) { 
          if(selectors[i].nodes.indexOf(not_in[a]) == -1){ 
           selectors[i].nodes.push(not_in[a]); 
          } 
         }; 
         N$_ = selectors[i]; 
         break; 
        }else{ 
         N$_ = N$_new; 
         /* 
         if(N$_.nodes.length > 0){ 
          selectors.push(N$_); 
         }*/ 
        } 
       }; 
      }else{ 
       N$_ = N$_new; 
       if(N$_.nodes.length > 0){ 
        selectors.push(N$_); 
       } 
      } 
      return N$_; 
    }; 
})(); 

использования с:

N$('.ProfileCard .FollowStatus').addEvent('click', function(node_, event_){ 
    //Do something. 
    //node_ is a native Node 
});