Select items ignoring others with JQuery

Navigation
1

I have this structure HTML . 

var subMenuElementos = $('#menu nav ul li a');
subMenuElementos.removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
      <nav>
        <ul>
          <li><a href="https://google.com">Quiero quitar su href</a></li>
          <li><a href="https://google.com">Quiero quitar su href</a>
            <div class="sub-menu">
              <ul>
                <li><a href="https://google.com">Quiero conservar su href</a></li>
                <li><a href="https://google.com">Quiero conservar su href</a></li>
              </ul>
            </div>
          </li>
          <li><a href="https://google.com">Quiero quitar su href</a></li>
          <li><a href="https://google.com">Quiero quitar su href</a></li>
          <li><a href="https://google.com">Quiero quitar su href</a>
            <div class="sub-menu">
              <ul>
                <li><a href="https://google.com">Quiero conservar su href</a></li>
                <li><a href="https://google.com">Quiero conservar su href</a></li>
              </ul>
            </div>
          </li>
          <li><a href="https://google.com">Quiero quitar su href</a></li>
        </ul>
      </nav>
    </div>

The problem is that I am not selecting correctly the <a> tags I want.

What would be the correct way to select them?

    
asked by akko 23.01.2018 в 01:27
source

3 answers

1

You are performing the element selection incorrectly you should tell JQuery not to take the ones that are inside the class submenú , this can be achieved with not () $("#menu a").not(".sub-menu a"); we select all the tags a of #menu but not those that are inside the class .sub-menu 

$(function() {
    var subMenuElementos = $("#menu a").not(".sub-menu a");
    $(subMenuElementos).removeAttr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <nav>
    <ul>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
    </ul>
  </nav>
</div>
    
answered by 23.01.2018 в 02:14
0

Look at this code, using querySelectorAll .

Here var eSet = document.getElementById('menu').querySelectorAll('a'); you select all <a> within the element whose id is menu , and you scroll them to remove the attribute.

► Pure Javascript 

function cambiarLinks() {

  var eSet = document.getElementById('menu').querySelectorAll('a');
  var i = eSet.length;

  while (i--) {
  var url=eSet[i].href;
    eSet[i].removeAttribute('href');
    console.log(url + ' ha sido quitado');
  }
  
}
window.onload = cambiarLinks;
<div id="menu">
  <nav>
    <ul>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
    </ul>
  </nav>
</div>

► jQuery 

$(function() {
  var eSet = $('#menu').find('a');
  var i = eSet.length;

  while (i--) {
    var url = eSet[i].href;
    eSet[i].removeAttribute('href');
    console.log(url + ' ha sido quitado');
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="menu">
  <nav>
    <ul>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
    </ul>
  </nav>
</div>
    
answered by 23.01.2018 в 01:54
0

Another option would be to use the child selector indicating up to the desired level: 

#menu > nav > ul > li > a

Example: 

$(function() {
    $("#menu > nav > ul > li > a").removeAttr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
  <nav>
    <ul>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
      <li><a href="https://google.com">Quiero quitar su href</a>
        <div class="sub-menu">
          <ul>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
            <li><a href="https://google.com">Quiero conservar su href</a></li>
          </ul>
        </div>
      </li>
      <li><a href="https://google.com">Quiero quitar su href</a></li>
    </ul>
  </nav>
</div>
    
answered by 23.01.2018 в 02:46
Display data from B.D. in an HTML select Extract result of a function