Getting a child row with Jquery

JavaScript
1

I am trying to replace the source of an image dynamically created previously through the DOM.
The end div will always contain two divs (index 0 and index 1)

The structure is as follows

DIV id=#s1

DIV #S1
    .stockitemsimgrow
        ------ div row 0 --------
        .stockitemsimgholder
            .stockitemsimg
                <img/>
        ------ div row 1 --------
        .stockitemsimgholder
            .stockitemsimg
                 <img/>

I need to replace the IMG src using the line number (0 or 1)

2

use either getElementsByTagName() or querySelectorAll().

1 Like
3

This will probably work:

const imgs = document.querySelectorAll('.stockitemsimg > img')

imgs[0].src = 'newimage.jpg'
imgs[1].src = 'anothernewimg.jpg'
4

The structure of your HTML seems to be the following:

<div id="s1">
  <div class="stockitemsimgrow">
    <div> <!-- ------ div row 0 -------- -->
      <div class="stockitemsimgholder">
        <div class="stockitemsimg">
          <img/>        
        </div>
      </div>
    </div>
    <div> <!-- ------ div row 1 -------- -->
      <div class="stockitemsimgholder">
        <div class="stockitemsimg">
          <img/>        
        </div>
      </div>
    </div>
  </div>
</div>

It seems that you want to achieve <img src="0.jpg"> and <img src="1.jpg"> if I’m reading your post correctly, and you want to achieve that using jQuery.

You can do that using an each loop:

jQuery(function ($) {
  $(".stockitemsimg").each(function (index, itemsimg) {
    $("img", itemsimg).attr("src", index + ".jpg");
  });
});
1 Like
5

Okay let me explain a bit better.
Could be a large list of items.

<div id="s1">
  <div class="stockitemsimgrow">
    <div> <!-- ------ div row 0 -------- -->
      <div class="stockitemsimgholder">
        <div class="stockitemsimg">
          <img/>        
        </div>
      </div>
    </div>
    <div> <!-- ------ div row 1 -------- -->
      <div class="stockitemsimgholder">
        <div class="stockitemsimg">
          <img/>        
        </div>
      </div>
    </div>
  </div>
</div>
<div id="s2">
  <div class="stockitemsimgrow">
    <div> <!-- ------ div row 0 -------- -->
      <div class="stockitemsimgholder">
        <div class="stockitemsimg">
          <img/>        
        </div>
      </div>
    </div>
    <div> <!-- ------ div row 1 -------- -->
      <div class="stockitemsimgholder">
        <div class="stockitemsimg">
          <img/>        
        </div>
      </div>
    </div>
  </div>
</div>

So something like::

stock = $('#s1').find('stockitemsimg');

stock 0 = image source name
stock 1 = another image source name

Many thanks

6

Off Topic.

@Exphor: when you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

7

Okay, so .stockitemsimgrow is the start of each image numbering cycle.
I’ll use the modified div structure that you supplied.

Let’s work through how to modify the scripting code to achieve that. Here’s the existing code:

jQuery(function ($) {
  $(".stockitemsimg").each(function (index, itemsimg) {
    $("img", itemsimg).attr("src", index + ".jpg");
  });
});

We want the .stockitemsimg selection to be restricted to each .stockitemsimgrow section, so the first jQuery selector can be restricted based on that:

$(".stockitemsimg", itemsimgrow).each(...

And we can wrap that code with another selector loop that gives us itemsimgrow:

$(".stockitemsimgrow").each(function (ignore, itemsimgrow) {
  ...
});

I now want to use those index numbers for the image names, and presume that you want to reference that information from an array. Unless you want each set of images to be identical, we’ll want to make use of the s1 and s2 parent id to help us group the images together.

How we best achieve that is to start from the array/object structure, and modify the code to work with that structure.

var images = [
  {
    id: "s1",
    imgs: [
      "http://www.iconsplace.com/download/aqua-number-1-128.ico",
      "http://icons.iconarchive.com/icons/icons8/windows-8/128/Numbers-2-icon.png"
    ]
  },
  {
    id: "s2",
    imgs: [
      "https://v.fastcdn.co/u/12116475/23083356-0-one.png",
      "http://neslearningzone.com/wp-content/uploads/2016/11/year-2.png"
    ]
  }
];

We can now filter for the id, and get the appropriate image:

  $(".stockitemsimgrow").each(function (ignore, itemsimgrow) {
    var id = $(itemsimgrow).parent().attr("id");
    var imgs = images.find(function (imageInfo) {
      return imageInfo.id === id;
    }).imgs;

and the imgs variable now contains an indexed list of images to use.

We can now rename index + ".jpg" so that it gets the image from the array instead:

      $("img", itemsimg).attr("src", imgs[index]);

and we now have working code that sets the image to the images stored in the array/object structure.

The full scripting code is:

var images = [
  {
    id: "s1",
    imgs: [
      "http://www.iconsplace.com/download/aqua-number-1-128.ico",
      "http://icons.iconarchive.com/icons/icons8/windows-8/128/Numbers-2-icon.png"
    ]
  },
  {
    id: "s2",
    imgs: [
      "https://v.fastcdn.co/u/12116475/23083356-0-one.png",
      "http://neslearningzone.com/wp-content/uploads/2016/11/year-2.png"
    ]
  }
];

jQuery(function ($) {
  $(".stockitemsimgrow").each(function (ignore, itemsimgrow) {
    var id = $(itemsimgrow).parent().attr("id");
    var imgs = images.find(function (imageInfo) {
      return imageInfo.id === id;
    }).imgs;
    $(".stockitemsimg", itemsimgrow).each(function (index, itemsimg) {
      $("img", itemsimg).attr("src", imgs[index]);
    });
  });
});

and a working example is found at https://jsfiddle.net/bvmny207/1/

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.