Select a single element by class name between multiple element with the same class name?-CodePudding

I have multiple elements with the same class name. I want to store hexpaletteval of the column (and rgbpaletteval, but I was thinking about converting it directly) at click of the corresponding favcolor, but I'm not sure how to achieve this.

Using my code (below) it obviously changes the background color to yellow to ALL hexpalettecolor, not only one. I change the color to have a visual to what I'm doing.

I want to be able to chose only the value of hexpalettecolor in the same column, so if favcolor 1 I want to select hexpalettecolor 1

$(".favcolor").click(function() {
  $(".hexpaletteval").css("background-color", "yellow");
  $.ajax({
    type: "POST",
    url: "/favorite",
    data: {
      colorhex: $(".hexpaletteval").val(),
      colorrgb: hextorgb(colorhex),
    },
    success: function(data) {
      console.log(data);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <p>1</p>
      </div>
      <div >
        <p>1</p>
      </div>
    </div>
    <button >1</button>
  </div>
  <div >
    <div >
      <div >
        <p>2</p>
      </div>
      <div >
        <p>2</p>
      </div>
    </div>
    <button >2</button>
  </div>
  <div >
    <div >
      <div >
        <p>3</p>
      </div>
      <div >
        <p>3</p>
      </div>
    </div>
    <button >3</button>

  </div>
  <div >
    <div >
      <div >
        <p>4</p>
      </div>
      <div >
        <p>4</p>
      </div>
    </div>
    <button >4</button>
  </div>
  <div  id="5">
    <div >
      <div >
        <p>5</p>
      </div>
      <div >
        <p>5</p>
      </div>
    </div>
    <button >5</button>
  </div>
</div>
</div>

CodePudding user response：

To find the content related to the button which raised the event you can use the this keyword in the event handler along with closest() and find() to traverse the DOM.

Also, .hexpaletteval is a div element and so has no val() to read. I presume that you're intending to read the text inside the element, so this should be text() instead.

Finally, note that I changed the use of css() in your JS code to addClass() instead. This is better practice as it removed the styling data from your JS code.

$(".favcolor").click(function() {
  let $column = $(this).closest('.colorcoloumn');
  let $hexpaletteval = $column.find(".hexpaletteval").addClass('selected');
  
  let value = $hexpaletteval.text().trim();
  console.log(value);
});

.selected { 
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <p>1</p>
      </div>
      <div >
        <p>1</p>
      </div>
    </div>
    <button >1</button>
  </div>
  <div >
    <div >
      <div >
        <p>2</p>
      </div>
      <div >
        <p>2</p>
      </div>
    </div>
    <button >2</button>
  </div>
  <div >
    <div >
      <div >
        <p>3</p>
      </div>
      <div >
        <p>3</p>
      </div>
    </div>
    <button >3</button>

  </div>
  <div >
    <div >
      <div >
        <p>4</p>
      </div>
      <div >
        <p>4</p>
      </div>
    </div>
    <button >4</button>
  </div>
  <div  id="5">
    <div >
      <div >
        <p>5</p>
      </div>
      <div >
        <p>5</p>
      </div>
    </div>
    <button >5</button>
  </div>
</div>
</div>