Tour div father

Question

Tour div father

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Good day, I have a father div, and within the various divs as follows:

<div id="messagesTable">

    <div id="white" ><span>white --- ggg</span></div>
    <div id="red" ><span>red --- cambiar</span></div>
    <div id="red" ><span>red --- nocambiar</span></div>
    <div id="red" ><span>red --- cambiar</span></div>
    <div id="white" ><span>white --- hola</span></div>
    <div id="white" ><span>white --- hola</span></div>

What I want is to go with jQuery or JavaScript the div #messagesTable identify div are id #red , and then get the span that is in the div #red if the span has as value the text "change" then to that div change the attribute id to white for example.

javascript jquery

asked by PolloKulos 01.11.2018 в 04:50

source

3 answers

0

The ids must be unique. In this case, if you want to identify several elements you can do it with a "name" attribute or by assigning a class. But respecting your example, you should do it like this:

There should be something like that

function changeText(val){
  //seleccionamos el div "padre" por su ID
  //Luego seleccionamos los div en su interior por ID
  //finalmente le agregamos que seleccione por nombre de etiqueta el span
  $("#messagesTable #red span").text(val);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagesTable">

    <div id="white" ><span>white --- ggg</span></div>
    <div id="red" ><span>red --- hola</span></div>
    <div id="red" ><span>red --- hola</span></div>
    <div id="red" ><span>red --- hola</span></div>
    <div id="white" ><span>white --- hola</span></div>
    <div id="white" ><span>white --- hola</span></div>
</div>
</br>
Nuevo texto
<input id="input" placeholder="Ingresá el nuevo texto aquí" oninput="changeText(this.value)"></input>

:

answered by 01.11.2018 в 05:15

0

As Fran Islas and Juan Salvador Portugal correctly say, the id attributes are unique, so you should try to do it in another way, this one I propose:

function cambiar() {
  // obtener el div principal
  const messages_table = document.querySelector("#messagesTable");

  // obtener todos los span que estén dentro de un elemento de clase red, del div principal
  const all_cambiar_red_span = messages_table.querySelectorAll(".red > span");

  // recorrer cada uno de ellos
  for (let span of all_cambiar_red_span)
    // revisar que no contenga "nocambiar"
    if (!span.textContent.includes("nocambiar"))
       // cambiar el nombre de la clase del nodo padre(el div) a "white"
       span.parentNode.className = "white";
  
}

.white {
  background-color: #FFFFFF;
}
.red {
  background-color: #FF0000;
}

<div id="messagesTable">
    <div class="white"><span>white --- ggg</span></div>
    <div class="red"><span>red --- cambiar</span></div>
    <div class="red"><span>red --- nocambiar</span></div>
    <div class="red"><span>red --- cambiar</span></div>
    <div class="white"><span>white --- hola</span></div>
    <div class="white"><span>white --- hola</span></div>
</div>

<button onclick="cambiar()">Cambiar color</button>

I guess when you said

If the span has as value the text "change" then to that div change ...

You used to say that if said content of the div, it said to change with spaces, since all the span contain in itself the text "change", evaluate change and not change in a regex /cambiar/ and both will match: change and not change

That's why I looked for the string "notchange" instead of "change" and then I denied it.

I hope I have helped you.

answered by 01.11.2018 в 13:15

Can the meta tags go outside the head (Inside the body)? if the variable is less than ship, generate another random number - python

score 0 · Accepted Answer

I made a small code that makes your approach:

$('#messagesTable > div[id="red"]').find('span').filter(function() {
  
  var palabra = "cambiar";
  if(new RegExp("\b" + palabra + "\b").test($(this).text())){
    console.log($(this).text());
    $(this).css({"background":"black","color":"white"});
  }
  
});

<div id="messagesTable">

    <div id="white" ><span>white --- ggg</span></div>
    <div id="red" ><span>red --- cambiar</span></div>
    <div id="red" ><span>red --- nocambiar</span></div>
    <div id="red" ><span>red --- cambiar</span></div>
    <div id="white" ><span>white --- hola</span></div>
    <div id="white" ><span>white --- hola</span></div>
    
</div>

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

Use the filter () for this and use a rule where I look exactly for the word "change".

I hope it serves you.