Search code examples
javascriptjqueryhtmlcheckboxhref

How to extract the "href" attribute value from within the closest list item


My site has a column of checkboxes with IDs in sequential order like "keepbox1", "keepbox2", etc. Each checkbox resides within a list item, along with a href attribute like this:

<li>
   <a href="http://iNeedThisUrl.com" class="describer">Title</a>
   <br>
   <input id="keepbox1" type="checkbox" class="kboxes" name="keepbox1"  />
   <label for="keepbox1">Keep</label>
   <div class="tinybox" alt="tinypic1" id="tinypic1" style="display:none;">  
      Content Here
   </div>
   </a>     
</li>

There is also an element on the page that I use as button

<a><label class="getFiles" for="lightbox-two">Submit</label></a>

When a user clicks this button, I have a script that loops through each variation of keepbox to see if a user checked it. If a particular keepbox is checked, I'd like to extract the href attribute's value in that particular li.

So if a user had checked keepbox1 from the demo code above, I'd like it to alert back "http://iNeedThisUrl.com".

I'm using the following script which successfully identifies a checked keepbox, but it's returning "undefined" in the alert box. I'm guessing I'm not grabbing the attribute properly. Any ideas? Thank you!

 <script type="text/javascript">
        $(document).ready(function() {
            $('.getFiles').click(function() {
                for (i = 1; i <= 100; i++) 
                  {
                    if ($("#keepbox" + i).prop('checked')) 
                     {
               var addressValue = $("#tinypic" + i).closest("li").attr("href");
               alert(addressValue);
                     }
                   }
            }); 
        });
    </script>

Solution

  • Two issues:

    1) you have closing anchor tag </a> without opening anchor tag as next sibling of div in li. you need to remove it.

    2) div elements #tinypic+n are siblings of anchor element. You need to use:

    $("#tinypic" + i).siblings("a").attr("href");
    

    or

    $("#tinypic" + i).prevAll("a").attr("href");
    

    or

    $("#tinypic" + i).closest("li").find("a").attr("href");